<template>
  <div class="app-container">
    <!-- 左边 -->
    <div class="left">
      <div class="put">
        <el-input placeholder="请输入机器人名称" v-model="robot_name" @change="getRobotName($event)"
          prefix-icon="el-icon-search" clearable></el-input>
      </div>
      <div class="table">
        <el-table :data="robotList" @row-click="handleSelectionChange" height="100%"
          :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
          :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
          :row-style="{ height: '40px', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
          :cell-style="{ padding: '0px', width: '100%', 'text-align': 'left' }">
          <el-table-column prop="robot_type" label="类型" width="100px">
            <template slot-scope="scope">
              <div v-if="scope.row.robot_type === 0" style="color:#a5b1bd;">普通</div>
              <div v-if="scope.row.robot_type === 1" style="color:#5bbefc;">救援</div>
              <div v-if="scope.row.robot_type === 2" style="color:#d0a707;">防爆</div>
            </template>
          </el-table-column>
          <el-table-column prop="robot_name" label="名称" width="90px">
          </el-table-column>
          <el-table-column prop="robot_state" label="状态" width="70px">
            <template slot-scope="scope">
              <i class="el-icon-error" v-if="scope.row.robot_state === 0"
                style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
              <i class="el-icon-success" v-if="scope.row.robot_state === 1"
                style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-bottom">
        <el-table :data="plcList" height="100%" :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
          :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
          :row-style="{ height: '30px', background: '#000224', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
          :cell-style="{ 'padding-right': '25px', width: '100%', 'text-align': 'left' }">
          <el-table-column prop="plc_name" label="PLC柜名称" width="100px">
          </el-table-column>
          <el-table-column prop="plc_num" label="PLC柜号" width="90px">
            <template slot-scope="scope">
              <div
                style="font-size: 12px;display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;">
                <div v-if="scope.$index + 1 == 1"
                  style=" display: flex; justify-content: center;align-items: center;  width:13px; background-color:#a64317; height: 13px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                  {{ scope.$index + 1 }}</div>
                <div v-if="scope.$index + 1 == 2"
                  style=" display: flex; justify-content: center;align-items: center;  width:13px; background-color:#a67c17; height: 13px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                  {{ scope.$index + 1 }}</div>
                <div v-if="scope.$index + 1 == 3"
                  style=" display: flex; justify-content: center;align-items: center;  width:13px; background-color:#9aa617; height: 13px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                  {{ scope.$index + 1 }}</div>
                <div v-if="scope.$index + 1 >= 4"
                  style=" display: flex; justify-content: center;align-items: center;  width:13px; background-color:#64a617; height: 13px; border-radius: 9px; color: #fff; margin: 2px 10px 0 0 ;">
                  {{ scope.$index + 1 }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="plc_state" label="状态" width="70px">
            <template slot-scope="scope">
              <i class="el-icon-error" v-if="scope.row.plc_state === 0"
                style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
              <i class="el-icon-success" v-if="scope.row.plc_state === 1"
                style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-bottom">
        <el-table :data="onlineList" height="100%" :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
          :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
          :row-style="{ height: '30px', background: '#000224', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
          :cell-style="{ 'padding-right': '25px', width: '100%', 'text-align': 'left' }">
          <el-table-column prop="cameraName" label="摄像头名称" width="190px">
          </el-table-column>
          <el-table-column prop="loginValue" label="状态" width="70px">
            <template slot-scope="scope">
              <i class="el-icon-error" v-if="scope.row.loginValue === 0"
                style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
              <i class="el-icon-success" v-if="scope.row.loginValue != 0"
                style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 中间 -->
    <div class="video-center">
      <div>
        <p id="robotitle" style="font-size:18px;color: #e7e7ea;letter-spacing:1px;"></p>
      </div>
      <div class="center-box1">
        <!-- 转速盘 -->
        <div class="Speed-dial">
          <div id="gauges2" ref="gauges2" style="width:29%;height:150px; margin-top:7%"></div>
          <div id="gauges" ref="gauges" style="width:45%;height:170px;margin-left:-8px;margin-top:1%"></div>
          <div id="gauges3" ref="gauges3" style="width: 26%;height:150px;margin-right:3px;margin-top:7%"></div>
        </div>
        <div class="right-mode1">
          <div class="mode-box">
            <p>现场温度</p>
            <p>{{ xcwd }}</p>
          </div>
          <div class="mode-box">
            <p>现场湿度</p>
            <p>{{ xcsd }}</p>
          </div>
          <div class="mode-box">
            <p>模式</p>
            <p>{{ jqrms }}</p>
          </div>
          <div class="mode-box">
            <p>方向</p>
            <p style="color: #9f702c;" v-if="jqrfx=='后退'">{{ jqrfx }}</p>
            <p v-else-if="jqrfx=='无'">{{ jqrfx }}</p>
            <p style="color: #2da14e;" v-else >{{ jqrfx }}</p>
          </div>
          <div class="mode-box">
            <p>电池电压</p>
            <p style="color: #30a96a;" v-if="dcdy > 70">{{ dcdy }}v</p>
            <p style="color: #29ab33;" v-else-if="dcdy > 50">{{ dcdy }}v</p>
            <p style="color: #46cc51;" v-else-if="dcdy > 30">{{ dcdy }}v</p>
            <p style="color: #9eee25;" v-else-if="dcdy > 20">{{ dcdy }}v</p>
            <p style="color: #a5f1a6;" v-else-if="dcdy > 15">{{ dcdy }}v</p>
            <p v-else-if="dcdy=='无'">{{ dcdy }}</p>
            <p style="color: #e19532;" v-else>{{ dcdy }}v</p>
          </div>
        </div>
        <div class="right-mode2">
          <div class="mode-box">
            <p>栅格数</p>
            <p>{{ gswl }}</p>
          </div>
          <div class="mode-box">
            <p>栅格孔数</p>
            <p>{{ jcgssl }}</p>
          </div>
          <div class="mode-box">
            <p>速度设定</p>
            <p>{{ jqrsd }}</p>
          </div>
          <div class="mode-box">
            <p>实时位移</p>
            <p>{{ sswy }}</p>
          </div>
          <div class="mode-box">
            <p>电池状态</p>
            <p style="color: #96e81a;" v-if="dczt=='充电'">{{ dczt }}</p>
            <p v-else-if="dczt=='无'">{{ dczt }}</p>
            <p style="color: #9f702c;" v-else >{{ dczt }}</p>
          </div>
        </div>
        <div style="margin-left:14px;">
          <img src="../../components/images/line1.png" alt="">
        </div>
        <div class="Mode-selection">
          <p>模式选择</p>
        </div>

        <!-- 五个按钮 -->
        <div class="Operation-button" id="#btn">
          <div class="Operation-buttonBox" @click="jqrmsF('1')">
            <el-button size="mini" circle @click="selectedTab = 0"></el-button>
            <p>手动模式</p>
          </div>
          <!--          <div class="Operation-buttonBox" @click="jqrmsF('2')">
            <el-button size="mini" circle
                       style=" background: linear-gradient(227deg, #0F947C, #10DAB2);">
            </el-button>
            <p>自动模式</p>
          </div>-->
          <div class="Operation-buttonBox" @click="jqrzymsF('0')" v-hasPermi="['robot:kzymzyms:view']">
            <el-button @click="selectedTab = 3" size="mini" circle
              style="
                                                                            background: linear-gradient(227deg, #C45016, #F58614);">
            </el-button>
            <p>自由</p>
          </div>
          <div class="Operation-buttonBox" @click="jqrzymsF('3')">
            <el-button size="mini"  circle
              style="
                                                                            background: linear-gradient(227deg, #337F17, #3CA813);">
            </el-button>
            <p>返航</p>
          </div>
          <div class="Operation-buttonBox" @click="zt()">
            <el-button size="mini" circle style="
                      background: linear-gradient(227deg, #B72517, #EA392D);">
            </el-button>
            <p>暂停</p>
          </div>
        </div>
      </div>
      <!-- 手动模式 -->
      <div class="center-box2-1" v-if="selectedTab === 0">
        <div class="right-bottomTitle">
          <p>手动模式</p>
          <span></span>
        </div>
        <div class="right-bottomBox">
          <div class="right-bottomBox1">
            <div class="right-bottomBox1-1">
              <p contenteditable="true" id="mbwzid">0</p>
              <span>m</span>
              <el-button class="btn" size="default" @click="mbwz()">目标位置</el-button>
            </div>
            <div class="right-bottomBox1-2">
              <el-dropdown @command="sdmslb">
                <el-button type="primary" size="min" style="width: 80px;
                                                                                                    height: 25px;background: #0F1A43 !important;
                                                                                                    display: flex;
                                                                                                    justify-content: space-around;
                                                                                                    align-items: center;
                                                                                                    border: 2px solid #54619D;
                                                                                                    border-radius: 10px;
                                                                                                    font-size: 12px;
                                                                                                    font-family: Bahnschrift;
                                                                                                    font-weight: 400;
                                                                                                    color: #C1C1C1;">
                  {{ sdmssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="0">0</el-dropdown-item>
                  <el-dropdown-item command="1000">1000</el-dropdown-item>
                  <el-dropdown-item command="2000">2000</el-dropdown-item>
                  <el-dropdown-item command="3000">3000</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <span>r/min</span>
              <el-button class="btn" size="default" @click="sdmsdsd()">速度设定</el-button>
            </div>
          </div>
          <div class="right-bottomBox1-3" v-if="showButtons">
            <div class="right-bottomBox1-3-1">
              <el-button class="btn1" size="default" @click="fg()">放钩</el-button>
              <el-button class="btn2" size="default" @click="sg()">收钩</el-button>
            </div>
          </div>
          <div class="right-bottomBox1-4">
            <div class="right-bottomBox1-4-1">
              <el-button class="btn1" size="default" @click="sdmsqd()">启动</el-button>
              <el-button class="btn2" size="default" @click="sdmsqj()">前进</el-button>
              <el-button class="btn3" size="default" @click="sdmsht()">后退</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 自动模式 -->
      <div class="center-box2-2" v-if="selectedTab === 1">
        <div class="right-bottomTitle">
          <p>自动模式</p>
          <span></span>
        </div>
        <div class="right-bottomBox1">
          <el-dropdown @command="zdmslb">
            <el-button type="primary" size="min" style="width: 80px;
                                                                                              height: 25px;background: #0F1A43 !important;
                                                                                              display: flex;
                                                                                              justify-content: space-around;
                                                                                              align-items: center;
                                                                                              border: 2px solid #54619D;
                                                                                              border-radius: 10px;
                                                                                              font-size: 12px;
                                                                                              font-family: Bahnschrift;
                                                                                              font-weight: 400;
                                                                                              color: #C1C1C1;">
              {{ zdmssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="0">0</el-dropdown-item>
              <el-dropdown-item command="1000">1000</el-dropdown-item>
              <el-dropdown-item command="2000">2000</el-dropdown-item>
              <el-dropdown-item command="3000">3000</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>r/min</span>
          <el-button class="btn" size="default" @click="zdmsdsd()">速度设定</el-button>
        </div>
        <div class="right-bottomBox2">
          <el-button class="btn1" size="default" @click="zdmsqd()">启动</el-button>
          <el-button class="btn2" size="default" @click="dd()">定点</el-button>
          <el-button class="btn3" size="default" @click="lx()">连续</el-button>
        </div>
      </div>
      <!-- 一键返航 -->
      <div class="center-box2-3" v-if="selectedTab === 2">
        <div class="right-bottomTitle">
          <p>一键返航</p>
          <span></span>
        </div>
        <div class="right-bottomBox">
          <div class="right-bottomBox1" v-if="showButtons">
            <el-button class="btn1" size="default" @click="fg()">放钩</el-button>
            <el-button class="btn2" size="default" @click="sg()">收钩</el-button>
          </div>
          <div class="right-bottomBox2">
            <el-button class="btn" size="default" @click="yjfh()">返航</el-button>
          </div>
        </div>
      </div>
      <!-- 自由模式 -->
      <div class="center-box2-4" v-if="selectedTab === 3">
        <div class="right-bottomTitle">
          <p>自由模式</p>
          <span></span>
        </div>
        <div class="right-bottomBox">
          <div class="right-bottomBox1">
            <el-dropdown @command="zymslb">
              <el-button type="primary" size="min" style="width: 80px;
                                                                                                height: 25px;background: #0F1A43 !important;
                                                                                                display: flex;
                                                                                                justify-content: space-around;
                                                                                                align-items: center;
                                                                                                border: 2px solid #54619D;
                                                                                                border-radius: 10px;
                                                                                                font-size: 12px;
                                                                                                font-family: Bahnschrift;
                                                                                                font-weight: 400;
                                                                                                color: #C1C1C1;">
                {{ zymssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">0</el-dropdown-item>
                <el-dropdown-item command="1000">1000</el-dropdown-item>
                <el-dropdown-item command="2000">2000</el-dropdown-item>
                <el-dropdown-item command="3000">3000</el-dropdown-item>
                <el-dropdown-item command="4000">4000</el-dropdown-item>
                <el-dropdown-item command="5000">5000</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>r/min</span>
            <el-button class="btn" size="default" @click="zymsdsd()">速度设定</el-button>
          </div>
          <div class="right-bottomBox2" v-if="showButtons">
            <el-button class="btn1" size="default" @click="fg()">放钩</el-button>
            <el-button class="btn2" size="default" @click="sg()">收钩</el-button>
          </div>
          <div class="right-bottomBox3">
            <el-button class="btn1" size="default" @click="sdmsqd()">启动</el-button>
            <el-button class="btn2" size="default" @click="sdmsqj()">前进</el-button>
            <el-button class="btn3" size="default" @click="sdmsht()">后退</el-button>
          </div>
        </div>

      </div>
    </div>

    <!-- 右边 -->
    <div class="video-right">
      <div> <!--<div class="right-header">-->
        <p style="font-size:18px;color: #e7e7ea;letter-spacing:1px;">视频监控</p>
      </div>
      <!-- 大华摄像头 -->
      <div class="videoBox" v-show="this.camera_type == 0 || this.camera_type == null">
        <div class="videobox1">
          <div class="box" :class="{ active: activeBox === 1 }" @click=" activeBox = 1; Qyt = true; Hyt = false">
            <div id="flv_liveQ"></div>
            <!-- <video v-show="videoShowQ" id="DHQvideo" style="width:100%;height:99%" class="video-js" controls></video> -->
          </div>
          <div class="box" :class="{ active: activeBox === 2 }" @click=" activeBox = 2; Qyt = false; Hyt = true">
            <div id="flv_liveH"></div>
            <!-- <video v-show="videoShowH" id="DHHvideo" class="video-js" style="width:100%;height:99%" control></video> -->
          </div>
        </div>
        <div class="videobox2">
          <div class="videobox2-1">
            <p>音视频</p>
            <span></span>
          </div>
          <div class="videobox2-2">
            <div class="videobox2-2-1">
              <el-dropdown @command="sxtxz">
                <el-button type="primary" size="min" style="width: 90px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                  {{ sxtjs }}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="前摄校时" @click.native="Qtiming">前摄校时</el-dropdown-item>
                  <el-dropdown-item command="后摄校时" @click.native="Htiming">后摄校时</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <p contenteditable="true" id="sy"></p>
            </div>

            <div class="videobox2-2-3">
              <el-button class="btn1" size="default" @click="Qwatermark">前像头水印</el-button>
              <el-button class="btn2" size="default" @click="Hwatermark">后像头水印</el-button>
            </div>
            <div class="videobox2-2-4">
              <el-button class="btn" @click="QstartVideo" size="mini">前像头录像</el-button>
              <el-button class="btn" @click="HstartVideo" size="mini">后像头录像</el-button>
            </div>
            <div class="videobox2-2-5">
              <el-button class="btn" @click="QendVideo" size="mini">前像头停止录制</el-button>
              <el-button class="btn" @click="HendVideo" size="mini">后像头停止录制</el-button>
            </div>
          </div>
        </div>
        <img src="../../components/images/line.png" alt="">
        <div class="videobox3">
          <div class="videobox3-1">
            <p>云台</p>
            <span></span>
          </div>
          <div class="videobox3-2" v-show="Qyt">
            <!-- 八角云盘 -->
            <div class="ptz">
              <!-- /* 外圆环 */ -->
              <div id="round"></div>
              <!-- /* 黑色内圆环 */ -->
              <div id="center_black"></div>
              <div id="center_blue" @click="Qpicture">
                <span>抓图</span>
              </div>
              <div id="circle0">
                <div id="left">
                  <div class="circle-left" id="circle2" @click="startQUpRunning" @mousedown="startQUpRunning1"
                    @mouseup="stopQUpRunning1">
                    <span>上</span>
                  </div>
                  <div class="circle-left" id="circle3" @click="startQRUpRunning" @mousedown="startQRUpRunning1"
                    @mouseup="stopQRUpRunning1">
                    <span>右上</span>
                  </div>
                  <div class="circle-left" id="circle4" @click="startQRighttRunning" @mousedown="startQRighttRunning1"
                    @mouseup="stopQRightRunning1">
                    <span>右</span>
                  </div>
                  <div class="circle-left" id="circle5" @click="startQRDwnRunning" @mousedown="startQRDwnRunning1"
                    @mouseup="stopQRDwnRunning1">
                    <span>右下</span>
                  </div>
                </div>
                <div id="right">
                  <div class="circle-right" id="circle9" @click="startQLUpRunning" @mousedown="startQLUpRunning1"
                    @mouseup="stopQLUpRunning1">
                    <span>左上</span>
                  </div>
                  <div class="circle-right" id="circle8" @click="startQLeftRunning" @mousedown="startQLeftRunning1"
                    @mouseup="stopQLeftRunning1">
                    <span>左</span>
                  </div>
                  <div class="circle-right" id="circle7" @click="startQLDwnRunning" @mousedown="startQLDwnRunning1"
                    @mouseup="stopQLDwnRunning1">
                    <span>左下</span>
                  </div>
                  <div class="circle-right" id="circle6" @click="startQDwnRunning" @mousedown="startQDwnRunning1"
                    @mouseup="stopQDwnRunning1">
                    <span>下</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 变倍 -->
            <div class="videobox3-3">
              <div class="videobox3-3-1">
                <p class="btn1" @click="BbjClick" @mousedown="BbjClick1" @mouseup="onLongBbj1"><i
                    class="el-icon-minus"></i>
                </p>
                <p>变倍</p>
                <p class="btn2" @click="BbAddClick" @mousedown="BbAddClick1" @mouseup="onLongAdd1"><i
                    class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startBjjRunning" @mousedown="startBjjRunning1" @mouseup="stopBjjRunning1"><i
                    class="el-icon-minus"></i></p>
                <p>变焦</p>
                <p class="btn2" @click="startBjAddRunning" @mousedown="startBjAddRunning1" @mouseup="stopBjAddRunning1">
                  <i class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startGqjRunning" @mousedown="startGqjRunning1" @mouseup="stopGqjRunning1"><i
                    class="el-icon-minus"></i></p>
                <p>光圈</p>
                <p class="btn2" @click="startGqAddRunning" @mousedown="startGqAddRunning1" @mouseup="stopGqAddRunning1">
                  <i class="el-icon-plus"></i></p>
              </div>
            </div>
          </div>
          <div class="videobox3-2" v-show="Hyt">
            <!-- 八角云盘 -->
            <div class="ptz">
              <!-- /* 外圆环 */ -->
              <div id="round"></div>
              <!-- /* 黑色内圆环 */ -->
              <div id="center_black"></div>
              <div id="center_blue" @click="Hpicture">
                <span>抓图</span>
              </div>
              <div id="circle0">
                <div id="left">
                  <div class="circle-left" id="circle2" @click="startHUpRunning" @mousedown="startHUpRunning1"
                    @mouseup="stopHUpRunning1">
                    <span>上</span>
                  </div>
                  <div class="circle-left" id="circle3" @click="startHRUpRunning" @mousedown="startHRUpRunning1"
                    @mouseup="stopHRUpRunning1">
                    <span>右上</span>
                  </div>
                  <div class="circle-left" id="circle4" @click="startHRighttRunning" @mousedown="startHRighttRunning1"
                    @mouseup="stopHRightRunning1">
                    <span>右</span>
                  </div>
                  <div class="circle-left" id="circle5" @click="startHRDwnRunning" @mousedown="startHRDwnRunning1"
                    @mouseup="stopHRDwnRunning1">
                    <span>右下</span>
                  </div>
                </div>
                <div id="right">
                  <div class="circle-right" id="circle9" @click="startHLUpRunning" @mousedown="startHLUpRunning1"
                    @mouseup="stopHLUpRunning1">
                    <span>左上</span>
                  </div>
                  <div class="circle-right" id="circle8" @click="startHLeftRunning" @mousedown="startHLeftRunning1"
                    @mouseup="stopHLeftRunning1">
                    <span>左</span>
                  </div>
                  <div class="circle-right" id="circle7" @click="startHLDwnRunning" @mousedown="startHLDwnRunning1"
                    @mouseup="stopHLDwnRunning1">
                    <span>左下</span>
                  </div>
                  <div class="circle-right" id="circle6" @click="startHDwnRunning" @mousedown="startHDwnRunning1"
                    @mouseup="stopHDwnRunning1">
                    <span>下</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 变倍 -->
            <div class="videobox3-3">
              <div class="videobox3-3-1">
                <p class="btn1" @click="startHBbjRunning" @mousedown="startHBbjRunning1" @mouseup="stopHBbjRunning1"><i
                    class="el-icon-minus"></i></p>
                <p>变倍</p>
                <p class="btn2" @click="startHBbAddRunning" @mousedown="startHBbAddRunning1"
                  @mouseup="stopHBbAddRunning1">
                  <i class="el-icon-plus"></i>
                </p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startHBjjRunning" @mousedown="startHBjjRunning1" @mouseup="stopHBjjRunning1"><i
                    class="el-icon-minus"></i></p>
                <p>变焦</p>
                <p class="btn2" @click="startHBjAddRunning" @mousedown="startHBjAddRunning1"
                  @mouseup="stopHBjAddRunning1">
                  <i class="el-icon-plus"></i>
                </p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startHGqjRunning" @mousedown="startHGqjRunning1" @mouseup="stopHGqjRunning1"><i
                    class="el-icon-minus"></i></p>
                <p>光圈</p>
                <p class="btn2" @click="startHGqAddRunning" @mousedown="startHGqAddRunning1"
                  @mouseup="stopHGqAddRunning1">
                  <i class="el-icon-plus"></i>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 吊舱摄像头 -->
      <div class="videoBox" v-show="this.camera_type == 2">
        <div class="videobox1">
          <div class="box" :class="{ active: activeBox === 1 }" @click=" activeBox = 1; Qyt = true; Hyt = false">
            <video v-show="videoShowQ" id="DCQvideo" class="video-js" style="width:100%;height:99%" controls autoplay
              autobuffer muted preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
          </div>
          <div class="box" :class="{ active: activeBox === 2 }" @click=" activeBox = 2; Qyt = false; Hyt = true">
            <video v-show="videoShowH" id="DCHvideo" class="video-js" style="width:100%;height:99%" controls autoplay
              autobuffer muted preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
          </div>
        </div>
        <div class="videobox2">
          <div class="videobox2-1">
            <p>音视频</p>
            <span></span>
          </div>
          <div class="videobox2-2">
            <div class="videobox2-2-1">
              <el-dropdown>
                <el-button disabled type="primary" size="min" style="width: 90px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                margin-bottom:5%;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                  <!--                  {{ sxtjs }}-->不可用<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="前摄校时">前摄校时</el-dropdown-item>
                  <el-dropdown-item command="后摄校时">后摄校时</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown>
                <el-button disabled type="primary" size="min" style="width: 90px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                  <!--                  {{ sxtcks }}-->不可用<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="2窗口">2窗口</el-dropdown-item>
                  <el-dropdown-item command="1窗口">1窗口</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="videobox2-2-3">
              <el-button class="btn1" size="default" disabled>前像头水印</el-button>
              <el-button disabled class="btn2" size="default">后像头水印</el-button>
            </div>
            <div class="videobox2-2-4">
              <el-button class="btn" size="mini">前像头录像</el-button>
              <el-button class="btn" size="mini">后像头录像</el-button>
            </div>
            <div class="videobox2-2-5">
              <el-button class="btn" size="mini">前像头停止录制</el-button>
              <el-button class="btn" size="mini">后像头停止录制</el-button>
            </div>
          </div>
        </div>
        <img src="../../components/images/line.png" alt="">
        <div class="videobox3">
          <div class="videobox3-1">
            <p>云台</p>
            <span></span>
          </div>
          <div class="videobox3-2" v-show="Qyt">
            <!-- 八角云盘 -->
            <div class="ptz">
              <!-- /* 外圆环 */ -->
              <div id="round"></div>
              <!-- /* 黑色内圆环 */ -->
              <div id="center_black"></div>
              <div id="center_blue" @click="DCQpicture">
                <span>抓图</span>
              </div>
              <div id="circle0">
                <div id="left">
                  <div class="circle-left" id="circle2" @click="startQUp">
                    <span>上</span>
                  </div>
                  <div class="circle-left" id="circle3" @click="startQRightUp">
                    <span>右上</span>
                  </div>
                  <div class="circle-left" id="circle4" @click="startQRight">
                    <span>右</span>
                  </div>
                  <div class="circle-left" id="circle5" @click="startQRightDow">
                    <span>右下</span>
                  </div>
                </div>
                <div id="right">
                  <div class="circle-right" id="circle9" @click="startQLeftUp">
                    <span>左上</span>
                  </div>
                  <div class="circle-right" id="circle8" @click="startQLeft">
                    <span>左</span>
                  </div>
                  <div class="circle-right" id="circle7" @click="startQLeftDow">
                    <span>左下</span>
                  </div>
                  <div class="circle-right" id="circle6" @click="startQDow">
                    <span>下</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 变倍 -->
            <div class="videobox3-3">
              <div class="videobox3-3-1">
                <p class="btn1" @click="BbjClick" @mousedown="BbjClick1" @mouseup="onLongBbj1"><i
                    class="el-icon-minus"></i>
                </p>
                <p>变倍</p>
                <p class="btn2" @click="BbAddClick" @mousedown="BbAddClick1" @mouseup="onLongAdd1"><i
                    class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startBjjRunning" @mousedown="startBjjRunning1" @mouseup="stopBjjRunning1"><i
                    class="el-icon-minus"></i></p>
                <p>变焦</p>
                <p class="btn2" @click="startBjAddRunning" @mousedown="startBjAddRunning1" @mouseup="stopBjAddRunning1">
                  <i class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startGqjRunning" @mousedown="startGqjRunning1" @mouseup="stopGqjRunning1"><i
                    class="el-icon-minus"></i></p>
                <p>光圈</p>
                <p class="btn2" @click="startGqAddRunning" @mousedown="startGqAddRunning1" @mouseup="stopGqAddRunning1">
                  <i class="el-icon-plus"></i></p>
              </div>
            </div>
          </div>
          <div class="videobox3-2" v-show="Hyt">
            <!-- 八角云盘 -->
            <div class="ptz">
              <!-- /* 外圆环 */ -->
              <div id="round"></div>
              <!-- /* 黑色内圆环 */ -->
              <div id="center_black"></div>
              <div id="center_blue" @click="DCHpicture">
                <span>抓图</span>
              </div>
              <div id="circle0">
                <div id="left">
                  <div class="circle-left" id="circle2" @click="startHUp">
                    <span>上</span>
                  </div>
                  <div class="circle-left" id="circle3" @click="startHRightUp">
                    <span>右上</span>
                  </div>
                  <div class="circle-left" id="circle4" @click="startHRight">
                    <span>右</span>
                  </div>
                  <div class="circle-left" id="circle5" @click="startHRightDow">
                    <span>右下</span>
                  </div>
                </div>
                <div id="right">
                  <div class="circle-right" id="circle9" @click="startHLeftUp">
                    <span>左上</span>
                  </div>
                  <div class="circle-right" id="circle8" @click="startHLeft">
                    <span>左</span>
                  </div>
                  <div class="circle-right" id="circle7" @click="startHLeftDow">
                    <span>左下</span>
                  </div>
                  <div class="circle-right" id="circle6" @click="startHDow">
                    <span>下</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 变倍 -->
            <div class="videobox3-3">
              <div class="videobox3-3-1">
                <p class="btn1" @click="startDCHsx"><i class="el-icon-minus"></i></p>
                <p>变倍</p>
                <p class="btn2" @click="startDCHfd"><i class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1"><i class="el-icon-minus"></i></p>
                <p>变焦</p>
                <p class="btn2"><i class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1"><i class="el-icon-minus"></i></p>
                <p>光圈</p>
                <p class="btn2"><i class="el-icon-plus"></i></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 海康摄像头 -->
      <div class="videoBox" v-show="this.camera_type == 1">
        <div class="videobox1">
          <div class="box" :class="{ active: activeBox === 1 }" @click=" activeBox = 1; Qyt = true; Hyt = false">
            <video id="HKvideo" class="video-js" style="width:100%;height:99%" controls autoplay autobuffer muted
              preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
          </div>
          <div class="box" :class="{ active: activeBox === 2 }" @click=" activeBox = 2; Qyt = false; Hyt = true">
          </div>
        </div>
        <div class="videobox2">
          <div class="videobox2-1">
            <p>音视频</p>
            <span></span>
          </div>
          <div class="videobox2-2">
            <div class="videobox2-2-1">
              <el-dropdown>
                <el-button type="primary" size="min" style="width: 80px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                  前后摄像头<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="前摄像头">前摄像头</el-dropdown-item>
                  <el-dropdown-item command="后摄像头">后摄像头</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <p contenteditable="true" id="sy"></p>
            </div>
            <div class="videobox2-2-2">
              <el-dropdown>
                <el-button type="primary" size="min" style="width: 70px;
                                                                height: 25px;background: #0F1A43 !important;
                                                                display: flex;
                                                                justify-content: space-around;
                                                                align-items: center;
                                                                border: 2px solid #54619D;
                                                                border-radius: 10px;
                                                                font-size: 12px;
                                                                font-family: Bahnschrift;
                                                                font-weight: 400;
                                                                color: #C1C1C1;">
                  窗口<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="2窗口">2窗口</el-dropdown-item>
                  <el-dropdown-item command="1窗口">1窗口</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </div>
            <div class="videobox2-2-3">
              <el-button class="btn1" size="default" @click="HKwatermark">摄像头水印</el-button>
              <el-button class="btn2" size="default" @click="HKtiming">摄像头校时</el-button>
            </div>
            <div class="videobox2-2-4">
              <el-button class="btn" size="mini">前像头录像</el-button>
              <el-button class="btn" size="mini">后像头录像</el-button>
            </div>
            <div class="videobox2-2-5">
              <el-button class="btn" @click="HKstartVideo" size="mini">摄像头开始录</el-button>
              <el-button class="btn" @click="HKendVideo" size="mini">摄像头停止录</el-button>
            </div>
          </div>
        </div>
        <img src="../../components/images/line.png" alt="">
        <div class="videobox3">
          <div class="videobox3-1">
            <p>云台</p>
            <span></span>
          </div>
          <div class="videobox3-2" v-show="Qyt">
            <!-- 八角云盘 -->
            <div class="ptz">
              <!-- /* 外圆环 */ -->
              <div id="round"></div>
              <!-- /* 黑色内圆环 */ -->
              <div id="center_black"></div>
              <div id="center_blue" @click="HKpicture">
                <span>抓图</span>
              </div>
              <div id="circle0">
                <div id="left">
                  <div class="circle-left" id="circle2" @click="startUp" @mousedown="startUp1" @mouseup="stopUp1">
                    <span>上</span>
                  </div>
                  <div class="circle-left" id="circle3" @click="startUpRight" @mousedown="startUpRight1"
                    @mouseup="stopUpRight1">
                    <span>右上</span>
                  </div>
                  <div class="circle-left" id="circle4" @click="startRight" @mousedown="startRight1"
                    @mouseup="stopRight1">
                    <span>右</span>
                  </div>
                  <div class="circle-left" id="circle5" @click="startDownRight" @mousedown="startDownRight1"
                    @mouseup="stopDownRight1">
                    <span>右下</span>
                  </div>
                </div>
                <div id="right">
                  <div class="circle-right" id="circle9" @click="startUpLeft" @mousedown="startUpLeft1"
                    @mouseup="stopUpLeft1">
                    <span>左上</span>
                  </div>
                  <div class="circle-right" id="circle8" @click="startLeft" @mousedown="startLeft1"
                    @mouseup="stopLeft1">
                    <span>左</span>
                  </div>
                  <div class="circle-right" id="circle7" @click="startDownLeft" @mousedown="startDownLeft1"
                    @mouseup="stopDownLeft1">
                    <span>左下</span>
                  </div>
                  <div class="circle-right" id="circle6" @click="startDown" @mousedown="startDown1"
                    @mouseup="stopDown1">
                    <span>下</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 变倍 -->
            <div class="videobox3-3">
              <div class="videobox3-3-1">
                <p class="btn1" @click="startBBminus" @mousedown="startBBminus1" @mouseup="stopBBminus1"><i
                    class="el-icon-minus"></i></p>
                <p>变倍</p>
                <p class="btn2" @click="startBBplus" @mousedown="startBBplus1" @mouseup="stopBBplus1"><i
                    class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startBJminus" @mousedown="startBJminus1" @mouseup="stopBJminus1"><i
                    class="el-icon-minus"></i></p>
                <p>变焦</p>
                <p class="btn2" @click="startBJplus" @mousedown="startBJplus1" @mouseup="stopBJplus1"><i
                    class="el-icon-plus"></i></p>
              </div>
              <div class="videobox3-3-1">
                <p class="btn1" @click="startGQminus" @mousedown="startGQminus1" @mouseup="stopGQminus1"><i
                    class="el-icon-minus"></i></p>
                <p>光圈</p>
                <p class="btn2" @click="startGQplus" @mousedown="startGQplus1" @mouseup="stopGQplus1"><i
                    class="el-icon-plus"></i></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import _ from 'lodash'
import * as echarts from "echarts";
import { listonPageRobotConfig } from "@/api/robot/robotconfig/robotconfig";
import { listsPlc } from "@/api/robot/plc/plc";
import $ from "jquery";
import {
  HendVideo,
  HfocusAdd,
  HfocusAdd1,
  HfocusAddEnd1,
  HfocusDec,
  HfocusDec1,
  HfocusDecEnd1,
  HirisAdd,
  HirisAdd1,
  HirisAddEnd1,
  HirisDec,
  HirisDec1,
  HirisDecEnd1,
  Hpicture,
  HptzDown,
  HptzDown1,
  HptzDownEnd1,
  HptzLeft,
  HptzLeft1,
  HptzLeftDown,
  HptzLeftDown1,
  HptzLeftDownEnd1,
  HptzLeftEnd1,
  HptzLeftUp,
  HptzLeftUp1,
  HptzLeftUpEnd1,
  HptzRight,
  HptzRight1,
  HptzRightDown,
  HptzRightDown1,
  HptzRightDownEnd1,
  HptzRightEnd1,
  HptzRightUp,
  HptzRightUp1,
  HptzRightUpEnd1,
  HptzUp,
  HptzUp1,
  HptzUpEnd1,
  HstartVideo,
  Htiming,
  Hwatermark,
  HzoomAdd,
  HzoomAdd1,
  HzoomAddEnd1,
  HzoomDec,
  HzoomDec1,
  HzoomDecEnd1,
  onLineStatus,
  QendVideo,
  QfocusAdd,
  QfocusAdd1,
  QfocusAddEnd1,
  QfocusDec,
  QfocusDec1,
  QfocusDecEnd1,
  QirisAdd,
  QirisAdd1,
  QirisAddEnd1,
  QirisDec,
  QirisDec1,
  QirisDecEnd1,
  Qpicture,
  QptzDown,
  QptzDown1,
  QptzDownEnd1,
  QptzLeft,
  QptzLeft1,
  QptzLeftDown,
  QptzLeftDown1,
  QptzLeftDownEnd1,
  QptzLeftEnd1,
  QptzLeftUp,
  QptzLeftUp1,
  QptzLeftUpEnd1,
  QptzRight,
  QptzRight1,
  QptzRightDown,
  QptzRightDown1,
  QptzRightDownEnd1,
  QptzRightEnd1,
  QptzRightUp,
  QptzRightUp1,
  QptzRightUpEnd1,
  QptzUp,
  QptzUp1,
  QptzUpEnd1,
  QstartVideo,
  Qtiming,
  Qwatermark,
  QzoomAdd,
  QzoomAdd1,
  QzoomAddEnd1,
  QzoomDec,
  QzoomDec1,
  QzoomDecEnd1
} from "@/api/robot/camera/cameraDH/video";
import {
  ddspCmd,
  fgCmd,
  htCmd,
  ippingCmd,
  isadminCmd,
  jqrdataCmd,
  jqrsdCmd,
  jqrsdzymsCmd,
  lxspCmd,
  mbwzCmd,
  msszCmd,
  qjCmd,
  robotrunCmd,
  robotstopCmd,
  sgCmd,
  xjsdCmd,
  yjfhCmd,
  zdqdCmd,
  zymshtCmd,
  zymsmsszCmd,
  zymsqjCmd,
  zymsrobotrunCmd
} from "@/api/robot/modbus/modbus";
import {
  DCHendVideo,
  DCHLeftDown,
  DCHLeftUp,
  DCHpicture,
  DCHptzDown,
  DCHptzLeft,
  DCHptzRight,
  DCHptzStop,
  DCHptzUp,
  DCHRightDown,
  DCHRightUp,
  DCHsmbPicture,
  DCHsmbVideo,
  DCHstartVideo,
  DCHzoomFocus,
  DCHzoomLess,
  DCHzoomStop,
  DCQendVideo,
  DCQLeftDown,
  DCQLeftUp,
  DCQpicture,
  DCQptzDown,
  DCQptzLeft,
  DCQptzRight,
  DCQptzStop,
  DCQptzUp,
  DCQRightDown,
  DCQRightUp,
  DCQsmbPicture,
  DCQsmbVideo,
  DCQstartVideo,
  DCQzoomFocus,
  DCQzoomLess,
  DCQzoomStop
} from "@/api/robot/camera/cameraDC/video";
import {
  HKendVideo,
  HKfocusAdd,
  HKfocusAdd1,
  HKfocusAddEnd1,
  HKfocusDec,
  HKfocusDec1,
  HKfocusDecEnd1,
  HKirisAdd,
  HKirisAdd1,
  HKirisAddEnd1,
  HKirisDec,
  HKirisDec1,
  HKirisDecEnd1,
  HKpicture,
  HKptzDown,
  HKptzDown1,
  HKptzDownEnd1,
  HKptzLeft,
  HKptzLeft1,
  HKptzLeftDown,
  HKptzLeftDown1,
  HKptzLeftDownEnd1,
  HKptzLeftEnd1,
  HKptzLeftUp,
  HKptzLeftUp1,
  HKptzLeftUpEnd1,
  HKptzRight,
  HKptzRight1,
  HKptzRightDown,
  HKptzRightDown1,
  HKptzRightDownEnd1,
  HKptzRightEnd1,
  HKptzRightUp,
  HKptzRightUp1,
  HKptzRightUpEnd1,
  HKptzUp,
  HKptzUp1,
  HKptzUpEnd1,
  HKstartVideo,
  HKtiming,
  HKwatermark,
  HKzoomAdd,
  HKzoomAdd1,
  HKzoomAddEnd1,
  HKzoomDec,
  HKzoomDec1,
  HKzoomDecEnd1
} from "@/api/robot/camera/hkvideo/video";
import { flvQVideo, flvHVideo, flvQStop, flvHStop } from "@/api/robot/flvvideo/index";


import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import FlvPlugin from 'xgplayer-flv'

let myChart = null;
let myChart1 = null;
let myChart2 = null;

export default {
  data() {
    return {
      playerQ: null,
      playerH: null,
      OnlineArry1: [],
      OnlineArry2: [],
      time: null,
      //时间戳
      mousedownTime: 0,
      mouseupTime: 0,
      //云台是否结束
      flag: true,
      //是否展示视频
      videoShowQ: false,
      videoShowH: false,
      timer: null,//定时器
      //切换不同的云台,默认显示大华
      camera_type: localStorage.getItem("camera_type") == "" ? 0 : localStorage.getItem("camera_type"),
      //切换不同云台
      Qyt: true,
      Hyt: false,

      //设置下拉按钮初始显示内容
      sxtjs: '摄像校时',
      sxtcks: "2窗口",
      //点击视频窗口切换选中标识
      robot_name: undefined,
      activeBox: 1,  //标识被选中
      //控制点击救援增加的按钮
      showButtons: false,
      //控制模式板块的切换(表示默认显示第一个内容)
      selectedTab: 0,
      //控制机器人的滚动条
      isDologin: false,
      input: '',
      robot_name_title: undefined, //机器人名称标题
      sdmssdzd: 1000,//手动模式速度设定
      zdmssdzd: 1000,//自动模式速度设定
      zymssdzd: 1000,//自由模式速度设定
      xcwd: "无",//现场温度
      xcsd: "无",//现场湿度
      dcdy: "无",//电池电压
      jqrms: "无",//机器人模式
      jqrfx: "无",//机器人方向
      gswl: '无', //格栅设定数量
      jcgssl: '无',//检测格栅孔数量
      jqrsd: '无',//机器人速度设定
      sswy: "无",//实时位移
      dczt: '无',//电池状态
      queryParams: {
        robot_name: undefined //机器人名称
      }, queryParams1: {
        robot_config_id: undefined
      }, queryParams2: {
        robotid: undefined
      },//查询参数
      queryparms3: {
        robotid: undefined,
        valu: undefined,
        robot_ip: undefined,
        robot_port: undefined,
        plcip: undefined,
        plcport: undefined,
        video_ip1: undefined,
        video_name1: undefined,
        video_pwd1: undefined,
        video_port1: undefined,
        residence_time: undefined,
        plcid: undefined,
        video_ip2: undefined,
        video_name2: undefined,
        video_pwd2: undefined,
        video_port2: undefined,
      }, //摄像头参数
      queryparms4: {
        valu: undefined,
        //camera_type:localStorage.getItem("camera_type"),
        video_ip1: localStorage.getItem("video_ip1"),
        video_name1: localStorage.getItem("video_name1"),
        video_pwd1: localStorage.getItem("video_pwd1"),
        video_port1: localStorage.getItem("video_port1"),
        residence_time: undefined,
        video_ip2: localStorage.getItem("video_ip2"),
        video_name2: localStorage.getItem("video_name2"),
        video_pwd2: localStorage.getItem("video_pwd2"),
        video_port2: localStorage.getItem("video_port2"),
        robot_config_id: localStorage.getItem("robot_config_id"),
      },
      //机器人列表
      robotList: [],
      //plc列表
      plcList: [],
      //online列表
      onlineList: [],
      rtspQurl: '',//前rtsp视频流地址
      flvQUrl: null,//请求回来的flv视频流地址
      rtspHurl: '',//后rtsp视频流地址
      flvHUrl: null,//请求回来的flv视频流地址
    }
  },
  created() {
    //初始化页面加载方法
    this.getList();//机器人列表
    this.getplcs();//机器人id查询plc列表
    // this.getISadmin();//当前用户是否管理员
    this.echarts1(0);//电机转速
    this.echarts2(0);//电机温度
    this.echarts3(0);//电池电量
  },
  mounted() {
    //加载完页面加载方法
    //机器人标题
    $("#robotitle").text(localStorage.getItem("robot_name") == null ? "机器人" : localStorage.getItem("robot_name"));
    localStorage.getItem("robotype") === '1' ? this.showButtons = true : this.showButtons = false;//是否显示脱钩、放钩按钮
    //定时轮询执行
    this.timer = setInterval(() => {
      this.getList();//机器人列表
      this.getplcs();//根据机器人ID查询plc列表
      this.robotdata();//机器人实时数据
      console.log("机器人控制页面定时")
    }, 2000);//2秒
    // this.spbf(localStorage.getItem("camera_type")); //挂在完成后播放当前的监控视频 摄像头播放
    this.getQOnlie();//摄像头在线离线状态
    if (this.camera_type != null && localStorage.getItem("camera_type") != "") {
      //====大华摄像头======
      if (this.camera_type == 0) {
        //大华前摄像头
        if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
          this.stopQFlvVideo()  //停止前flv流
          //检测摄像头ip通不通
          ippingCmd(localStorage.getItem("video_ip1")).then(response => {
            if (typeof (response.data.data) != null && response.data.data != null && response.data.data == true) {
              this.flvQspbf()
              this.videoShowQ = true
            } else {
              this.videoShowQ = false//如果ip密码账户名不存在则隐藏前摄像头
            }
          });
        } else {
          this.videoShowQ = false//如果ip密码账户名不存在则隐藏前摄像头
        }
        //大华后摄像头
        if (localStorage.getItem("video_ip2") != null && localStorage.getItem("video_ip2") != "") {
          this.stopHFlvVideo()  //停止后lv流
          //检测摄像头ip通不通
          ippingCmd(localStorage.getItem("video_ip2")).then(response => {
            if (typeof (response.data.data) != null && response.data.data != null && response.data.data == true) {
              this.flvHspbf()
              this.videoShowH = true
            } else {
              this.videoShowH = false
            }
          });
        } else {
          this.videoShowH = false
        }
      }
    }
  },
  methods: {
    //获取前摄像头转流地址
    flvQspbf() {
      const rtspQurl = {
        rtspUrl: 'rtsp://' + localStorage.getItem("video_name1") + ':' + localStorage.getItem("video_pwd1") + '@' + localStorage.getItem("video_ip1") + ':' + 554 + '/cam/realmonitor?channel=1&subtype=0'
      }
      flvQVideo(rtspQurl).then(response => {
        this.flvQUrl = response.data
        this.startQPlayLive(response.data);
      })
    },
    //获取后摄像头转流地址
    flvHspbf() {
      const rtspHurl = {
        rtspUrl: 'rtsp://' + localStorage.getItem("video_name2") + ':' + localStorage.getItem("video_pwd2") + '@' + localStorage.getItem("video_ip2") + ':' + 554 + '/cam/realmonitor?channel=1&subtype=0'
      }
      flvHVideo(rtspHurl).then(response => {
        this.flvHUrl = response.data
        this.startHPlayLive(response.data);
      })
    },
    // 前摄像头播放代码
    startQPlayLive(flvQUrl) {
      this.playerQ = new Player({
        id: "flv_liveQ",
        height: '100%',
        width: '100%',
        url: flvQUrl,
        plugins: [FlvPlugin],
        autoplayMuted: true,
        autoplay: true,
        closeVideoClick: true,
        videoFillMode: 'fill',
        videoAttributes: {
          crossOrigin: 'anonymous',// 元素获取数据的 CORS 请求的配置
          muted: true,
          controls: false
        },
        marginControls: false,
        isLive: true,
        // flv 插件参数
        flv: {
          retryCount: 3, // 重试 3 次，默认值
          retryDelay: 1000, // 每次重试间隔 1 秒，默认值
          loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
          fetchOptions: {
            // 该参数会透传给 fetch，默认值为 undefined
            mode: 'cors'
          }
        }
      });
    },
    // 后摄像头播放代码
    startHPlayLive(flvHUrl) {
      this.playerH = new Player({
        id: "flv_liveH",
        height: '100%',
        width: '100%',
        url: flvHUrl,
        plugins: [FlvPlugin],
        autoplayMuted: true,
        autoplay: true,
        closeVideoClick: true,
        videoFillMode: 'fill',
        videoAttributes: {
          crossOrigin: 'anonymous',// 元素获取数据的 CORS 请求的配置
          muted: true,
          controls: false
        },
        marginControls: false,
        isLive: true,
        // flv 插件参数
        flv: {
          retryCount: 3, // 重试 3 次，默认值
          retryDelay: 1000, // 每次重试间隔 1 秒，默认值
          loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
          fetchOptions: {
            // 该参数会透传给 fetch，默认值为 undefined
            mode: 'cors'
          }
        }
      });
    },
    //停止前摄像头flv视频流
    stopQFlvVideo() {
      flvQStop().then(response => { })
    },
    //停止后摄像头flv视频流
    stopHFlvVideo() {
      flvHStop().then(response => { })
    },

    //手动模式速度设定
    sdmslb(sdmssdzd) {
      this.sdmssdzd = sdmssdzd;
    },//自动模式速度设定
    zdmslb(zdmssdzd) {
      this.zdmssdzd = zdmssdzd;
    },//自由模式速度设定
    zymslb(zymssdzd) {
      this.zymssdzd = zymssdzd;
    },//摄像头设置
    sxtxz(sxtjs) {
      this.sxtjs = sxtjs;
    },//摄像头窗口
    sxtck(sxtcks) {
      this.sxtcks = sxtcks;
    },//获取当前机器人数据
    handleSelectionChange(row) {
      localStorage.removeItem("robot_config_id");//删除机器人id
      localStorage.removeItem("robot_name");//删除机器人名称
      localStorage.removeItem("video_ip1");//删除1摄像头ip
      localStorage.removeItem("video_port1");//删除1摄像头端口
      localStorage.removeItem("video_name1");//删除1摄像头账号
      localStorage.removeItem("video_pwd1");//删除1摄像头密码
      localStorage.removeItem("video_ip2");//删除2摄像头ip
      localStorage.removeItem("video_port2");//删除2摄像头端口号
      localStorage.removeItem("video_name2");//删除2摄像头账号
      localStorage.removeItem("video_pwd2");//删除2摄像头密码
      localStorage.removeItem("robotype");//删除机器人类型
      localStorage.removeItem("camera_type");//删除摄像头类型
      localStorage.setItem("video_ip1", row.video_ip1);//存储值
      localStorage.setItem("video_port1", row.video_port1);//存储值
      localStorage.setItem("video_name1", row.video_name1);//存储值
      localStorage.setItem("video_pwd1", row.video_pwd1);//存储值
      localStorage.setItem("video_ip2", row.video_ip2);//存储值
      localStorage.setItem("video_port2", row.video_port2);//存储值
      localStorage.setItem("video_name2", row.video_name2);//存储值
      localStorage.setItem("video_pwd2", row.video_pwd2);//存储值
      localStorage.setItem("robot_name", row.robot_name);//存储值
      localStorage.setItem("robot_config_id", row.id);//存储值
      localStorage.setItem("robotype", row.robot_type);//存储值
      localStorage.setItem("camera_type", row.camera_type);//存储摄像头类型
      //摄像头参数
      this.queryparms4.video_ip1 = localStorage.getItem("video_ip1");
      this.queryparms4.video_name1 = localStorage.getItem("video_name1");
      this.queryparms4.video_pwd1 = localStorage.getItem("video_pwd1");
      this.queryparms4.video_port1 = localStorage.getItem("video_port1");
      this.queryparms4.video_ip2 = localStorage.getItem("video_ip2");
      this.queryparms4.video_name2 = localStorage.getItem("video_name2");
      this.queryparms4.video_pwd2 = localStorage.getItem("video_pwd2");
      this.queryparms4.video_port2 = localStorage.getItem("video_port2");
      this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
      //将点击后存储的camera_type值赋值给data中的
      this.camera_type = localStorage.getItem("camera_type")
      //机器人名称标题
      $("#robotitle").text(localStorage.getItem("robot_name"));
      //是否显示脱钩、放钩按钮
      localStorage.getItem("robotype") === '1' ? this.showButtons = true : this.showButtons = false;
      this.getplcs();//根据机器人id查询plc列表
      // this.spbf(localStorage.getItem("camera_type"));//摄像头视频播放
      this.getQOnlie(); //摄像头状态
      //====大华摄像头======
      if (this.camera_type != null && localStorage.getItem("camera_type") != "") {
        //====大华摄像头======
        if (this.camera_type == 0) {
          //大华前摄像头
          if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
            this.stopQFlvVideo()  //停止前flv流
            //检测摄像头ip通不通
            ippingCmd(localStorage.getItem("video_ip1")).then(response => {
              if (typeof (response.data.data) != "undefined" && response.data.data != null && response.data.data == true) {
                this.flvQspbf()
                this.videoShowQ = true
              } else {
                this.videoShowQ = false//如果ip密码账户名不存在则隐藏前摄像头
              }
            });
          } else {
            this.videoShowQ = false//如果ip密码账户名不存在则隐藏前摄像头
          }
          //大华后摄像头
          if (localStorage.getItem("video_ip2") != null && localStorage.getItem("video_ip2") != "") {
            this.stopHFlvVideo()  //停止后flv流
            //检测摄像头ip通不通
            ippingCmd(localStorage.getItem("video_ip2")).then(response => {
              if (typeof (response.data.data) != "undefined" && response.data.data != null && response.data.data == true) {
                this.flvHspbf()
                this.videoShowH = true
              } else {
                this.videoShowH = false
              }
            });
          } else {
            this.videoShowH = false
          }
        }
      }
    }, //获取摄像头在线或离线
    getQOnlie() {
      //====== 大华摄像头==========
      if (this.camera_type == 0) {
        if (localStorage.getItem("video_ip1") != null
          && localStorage.getItem("video_ip1") != ""
          && localStorage.getItem("video_ip2") != null
          && localStorage.getItem("video_ip2") != ""
          && localStorage.getItem("video_name1") != null
          && localStorage.getItem("video_name1") != ""
          && localStorage.getItem("video_name2") != null
          && localStorage.getItem("video_name2") != ""
          && localStorage.getItem("video_pwd1") != null
          && localStorage.getItem("video_pwd1") != ""
          && localStorage.getItem("video_pwd2") != null
          && localStorage.getItem("video_pwd2") != ""
          && localStorage.getItem("video_port1") != null
          && localStorage.getItem("video_port1") != ""
          && localStorage.getItem("video_port2") != null
          && localStorage.getItem("video_port2") != ""
        ) {
          this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
          onLineStatus(this.queryparms4).then(response => {
            this.OnlineArry1 = response.data[0];
            this.OnlineArry2 = response.data[1];
            this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
            // this.onlineList = OnlineArry1.connect(OnlineArry2)
            // this.onlineList.forEach((item) => {
            //   this.onlineList = item
            // });
          });
        } else {
          this.$modal.msg("大华摄像头账号为空")
        }
      } else {
        this.onlineList = null
      }
      //====== 吊舱摄像头==========
      if (this.camera_type == 2) {
        this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
        if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
          onLineStatus(this.queryparms4).then(response => {
            this.OnlineArry1 = response.data[0];
            this.OnlineArry2 = response.data[1];
            this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
          });
        } else {
          this.$modal.msg("吊舱摄像头账号为空")
        }
      } else {
        this.onlineList = null
      }
      //====== 海康摄像头==========
      if (this.camera_type == 1) {
        if (localStorage.getItem("video_ip1") != null
          && localStorage.getItem("video_ip1") != ""
          && localStorage.getItem("video_name1") != null
          && localStorage.getItem("video_name1") != ""
          && localStorage.getItem("video_pwd1") != null
          && localStorage.getItem("video_pwd1") != ""
          && localStorage.getItem("video_port1") != null
          && localStorage.getItem("video_port1") != ""
        ) {
          this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
          onLineStatus(this.queryparms4).then(response => {
            this.OnlineArry1 = response.data[0];
            this.OnlineArry2 = response.data[1];
            this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
          });
        } else {
          this.$modal.msg("海康摄像头账号为空")
        }
      } else {
        this.onlineList = null
      }
    },//根据机器人id查询plc列表
    getplcs() {
      this.queryParams1.robot_config_id = localStorage.getItem("robot_config_id");
      listsPlc(this.queryParams1).then(response => {
        this.plcList = response.rows;
      });
    },//根据输入框机器人名称，查询机器人列表
    getRobotName(robot_name) {
      this.queryParams.robot_name = robot_name;
      this.getList();
    },//查询机器人列表
    getList() {
      this.loading = true;
      listonPageRobotConfig(this.queryParams).then(response => {
        this.robotList = response.rows;
      });
    },//定时查询机器人数据
    robotdata() {
      this.queryParams2.robotid = localStorage.getItem("robot_config_id");
      jqrdataCmd(this.queryParams2).then(response => {
        if (typeof response.data != "undefined" && response.data != null) {
          this.xcsd = response.data.xcsd + "%LEL";//现场湿度
          this.xcwd = response.data.xcwd + "°C"; //现场温度
          this.dcdy = response.data.dcdy; //电池电压
          this.jqrms = response.data.jqrms; //机器人模式
          this.jqrfx = response.data.jqrfx; //机器人方向
          this.gswl = response.data.gswl;//格栅设定数量
          this.jcgssl = response.data.jcgssl; //检测格栅孔数量
          this.jqrsd = response.data.jqrsd + "r/min";//机器人速度设定
          this.sswy = response.data.sswy + "m";//实时位移
          this.dczt = response.data.dczt; //电池状态
          this.echarts1(response.data.djzs == "" ? 0 : response.data.djzs);//电机转速
          this.echarts2(response.data.djwd == "" ? 0 : response.data.djwd);//电机温度
          this.echarts3(response.data.dcdl == "" ? 0 : response.data.dcdl);//电池电量
        } else {
          this.xcsd = "无";//现场湿度
          this.xcwd = "无"; //现场温度
          this.dcdy = "无"; //电池电压
          this.jqrms = "无"; //机器人模式
          this.jqrfx = "无"; //机器人方向
          this.gswl = "无";//格栅设定数量
          this.jcgssl = "无"; //检测格栅孔数量
          this.jqrsd = "无";//机器人速度设定
          this.sswy = "无";//实时位移
          this.dczt = "无"; //电池状态
          this.echarts1(0);//电机转速
          this.echarts2(0);//电机温度
          this.echarts3(0);//电池电量
        }
      });
    },
    ///////////////////////////机器人控制/////////////////////////////
    //机器人模式设置
    jqrmsF(jqrms) {
      this.queryparms3.valu = jqrms
      console.log("机器人模式设置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        msszCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("机器人模式设置不能为空")
      }
    },//机器人自由模式设置
    jqrzymsF(jqrms) {
      this.queryparms3.valu = jqrms
      console.log("机器人模式设置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zymsmsszCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("机器人模式设置不能为空")
      }
    },//目标位置
    mbwz() {
      this.queryparms3.valu = $("#mbwzid").text();
      console.log("目标位置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        mbwzCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("目标位置不能为空")
      }
    },//手动模式速度设置
    sdmsdsd() {
      this.queryparms3.valu = this.sdmssdzd;
      console.log("手动模式速度设置" + this.sdmssdzd);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        jqrsdCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("手动模式速度设置不能为空")
      }
    },//自动模式速度设置
    zdmsdsd() {
      this.queryparms3.valu = this.zdmssdzd;
      console.log("自动模式速度设置" + this.zdmssdzd);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        xjsdCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("自动模式速度设置不能为空")
      }
    },//自由模式速度设置
    zymsdsd() {
      this.queryparms3.valu = this.zymssdzd;
      console.log("自由模式速度设置" + this.zymssdzd);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        jqrsdzymsCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("自由模式速度设置不能为空")
      }
    },//手动模式前进
    sdmsqj() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      qjCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //手动模式后退
    sdmsht() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      htCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //手动模式(启动)
    sdmsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      robotrunCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自动模式(启动)
    zdmsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zdqdCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式(启动)
    zymsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymsrobotrunCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//定点视频
    dd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      ddspCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//连续视频
    lx() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      lxspCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //一键返航
    yjfh() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      yjfhCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//放钩
    fg() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      fgCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //收钩
    sg() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      sgCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式前进
    zymsqj() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymsqjCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //自由模式后退
    zymsht() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymshtCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //机器人暂停
    zt() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      robotstopCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//点击左侧第一个列表中的救援增加两个按钮
    handleJyClick() {
      this.showButtons = true
    },//点击左侧第一个列表中的普通隐藏两个按钮
    handlePtClick() {
      this.showButtons = false
    },
    /////////////////////大华摄像头////////////////////////
    //前-手动录像开始
    QstartVideo() {
      QstartVideo(this.queryparms4).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//前-手动停止录视频
    QendVideo() {
      QendVideo().then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //校时
    Qtiming() {
      Qtiming(this.queryparms4).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //水印
    Qwatermark() {
      this.queryparms4.valu = $("#sy").text();
      const value = this.queryparms4.valu
      if (value === '') {
        this.$modal.msg('摄像头水印不能为空')
      } else {
        Qwatermark(this.queryparms4).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      }
    },//前-上-点击
    startQUpRunning: _.throttle(function (event) {
      console.log("前向上点击事件")
      if (this.mouseupTime - this.mousedownTime < 1050) {
        QptzUp(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //前-上-长按
    startQUpRunning1() {
      console.log("前向上长按事件")
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        QptzUp1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopQUpRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      //鼠标抬起结束向上
      QptzUpEnd1(this.queryparms4).then(response => {
        //this.$modal.msg(response.msg);
      })
    },
    //前----下
    startQDwnRunning: _.throttle(function (event) {
      console.log("前向下点击事件")
      if (this.mouseupTime - this.mousedownTime < 1050) {
        QptzDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startQDwnRunning1() {
      console.log("前向下长按事件")
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        QptzDown1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopQDwnRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      //鼠标抬起结束向上
      QptzDownEnd1(this.queryparms4).then(response => {
        //this.$modal.msg(response.msg);
      })
    },
    //前----左
    startQLeftRunning: _.throttle(function (event) {
      console.log("前向左点击事件")
      if (this.mouseupTime - this.mousedownTime < 1050) {
        QptzLeft(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startQLeftRunning1() {
      console.log("前向左长按事件")
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        QptzLeft1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopQLeftRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      QptzLeftEnd1(this.queryparms4).then(response => {
        //this.$modal.msg(response.msg);
      })
    },
    //前------向右
    startQRighttRunning: _.throttle(function (event) {
      console.log("前向右点击事件")
      if (this.mouseupTime - this.mousedownTime < 1050) {
        QptzRight(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startQRighttRunning1() {
      console.log("前向右长按事件")
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        QptzRight1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopQRightRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      QptzRightEnd1(this.queryparms4).then(response => {
        //this.$modal.msg(response.msg);
      })
    },
    //前-拍照
    Qpicture() {
      Qpicture(this.queryparms4).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },
    //左上点击
    startQLUpRunning: _.throttle(function (event) {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        //云台向左上开始
        QptzLeftUp(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          }
        });
      }
    }, 1000),
    //左上长按
    startQLUpRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        //云台向左上开始
        QptzLeftUp1(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            //   if (typeof (response) != null) {
            //
            // }else{
            //   this.$modal.msg(response.msg);
            // }
          }
        });
      }, 500)
    },
    stopQLUpRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      //鼠标抬起左上结束
      QptzLeftUpEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          //this.$modal.msg(response.msg);
        }
      });
    },
    //右上点击
    startQRUpRunning: _.throttle(function (event) {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        //云台向右上开始
        QptzRightUp(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            if (response.msg != null) {
              this.$modal.msg(response.msg);
            } else {
            }
          }
        });
      }
    }, 1000),
    //右上长按
    startQRUpRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        //云台向右上开始
        QptzRightUp1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopQRUpRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      //鼠标抬起右上结束
      QptzRightUpEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //左下点击
    startQLDwnRunning: _.throttle(function (event) {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        QptzLeftDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //左下长按开始
    startQLDwnRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        //云台向右上开始
        QptzLeftDown1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    //左下长按结束
    stopQLDwnRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      //鼠标抬起左下结束
      QptzLeftDownEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //右下点击
    startQRDwnRunning: _.throttle(function (event) {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        QptzRightDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //右下长按开始
    startQRDwnRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        //云台向右上开始
        QptzRightDown1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    //右下长按结束
    stopQRDwnRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      //鼠标抬起右上结束
      QptzRightDownEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台变倍-
    BbjClick: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        QzoomDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    BbjClick1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        QzoomDec1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    onLongBbj1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      QzoomDecEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台变倍+ 开始
    BbAddClick: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        QzoomAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    BbAddClick1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        QzoomAdd1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    onLongAdd1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      QzoomAddEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台变焦+ 开始
    startBjAddRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        QfocusAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startBjAddRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        QfocusAdd1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBjAddRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      QfocusAddEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台变焦- 开始
    startBjjRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        QfocusDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startBjjRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        QfocusDec1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBjjRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      QfocusDecEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台光圈+ 开始
    startGqAddRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        QirisAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startGqAddRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        QirisAdd1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopGqAddRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      QirisAddEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台光圈-开始
    startGqjRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        QirisDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startGqjRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        QirisDec1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopGqjRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      QirisDecEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    /////大华后摄像头////
    //校时
    Htiming() {
      Htiming(this.queryparms4).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//水印
    Hwatermark() {
      this.queryparms4.valu = $("#sy").text();
      const value = this.queryparms4.valu
      if (value === '') {
        this.$modal.msg('摄像头水印不能为空')
      } else {
        Hwatermark(this.queryparms4).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      }
    },//手动录像开始
    HstartVideo() {
      HstartVideo(this.queryparms4).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//手动录像停止
    HendVideo() {
      HendVideo().then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//拍照
    Hpicture() {
      Hpicture(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
        }
      });
    },
    //云台向上开始
    startHUpRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HptzUp(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHUpRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HptzUp1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHUpRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HptzUpEnd1(this.queryparms4).then(response => {
        // if (typeof (response) == null) {
        //   // this.$modal.msg(response.msg);
        // }
      });
    },
    //云台向下开始
    startHDwnRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HptzDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHDwnRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HptzDown1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHDwnRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HptzDownEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台向左开始
    startHLeftRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HptzLeft(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHLeftRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HptzLeft1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHLeftRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HptzLeftEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台向右开始
    startHRighttRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HptzRight(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHRighttRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HptzRight1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHRightRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HptzRightEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台向左上开始
    startHLUpRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HptzLeftUp(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHLUpRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HptzLeftUp1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHLUpRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HptzLeftUpEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台向右上开始
    startHRUpRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HptzRightUp(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHRUpRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HptzRightUp1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHRUpRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HptzRightUpEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台向左下开始
    startHLDwnRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HptzLeftDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHLDwnRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HptzLeftDown1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHLDwnRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HptzLeftDownEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台向右下开始
    startHRDwnRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HptzRightDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHRDwnRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HptzRightDown1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHRDwnRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HptzRightDownEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台变倍+ 开始
    startHBbAddRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HzoomAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHBbAddRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HzoomAdd1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHBbAddRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HzoomAddEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台变倍- 开始
    startHBbjRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HzoomDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHBbjRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HzoomDec1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHBbjRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HzoomDecEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台变焦+ 开始
    startHBjAddRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HfocusAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHBjAddRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HfocusAdd1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHBjAddRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HfocusAddEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台变焦- 开始
    startHBjjRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HfocusDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHBjjRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HfocusDec1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHBjjRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HfocusDecEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台光圈+ 开始
    startHGqAddRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HirisAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHGqAddRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HirisAdd1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHGqAddRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HirisAddEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },
    //云台光圈-开始
    startHGqjRunning: _.throttle(function () {
      if (this.mouseupTime - this.mousedownTime < 1050) {
        HirisDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    startHGqjRunning1() {
      this.mousedownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HirisDec1(this.queryparms4).then(response => {
          //   if (typeof (response) != null) {
          //
          // }else{
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopHGqjRunning1() {
      this.mouseupTime = new Date().getTime()
      clearInterval(this.timer)
      HirisDecEnd1(this.queryparms4).then(response => {
        // if (typeof (response) != null) {
        //   this.$modal.msg(response.msg);
        // }
      });
    },


    ////////////////////吊舱摄像头/////////////////////
    //吊舱前摄像头
    //前-电子放大
    DCQzoomFocus() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQzoomFocus(q_video_ip).then(response => {
      });
    },
    //前-电子缩小
    DCQzoomLess() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQzoomLess(q_video_ip).then(response => {
      });
    },//前-电子停止
    DCQzoomStop() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQzoomStop(q_video_ip).then(response => {
      });
    },//电子缩小
    startDCsx() {
      this.DCQzoomLess()
      console.log('缩小开始')
    }, //电子放大
    startDCfd() {
      this.DCQzoomFocus()
      console.log('放大开始')
    },
    stopDCsxOrfd() {
      this.DCQzoomStop()
      console.log('缩小或放大停止')
    },//前-向上
    DCQptzUp() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQptzUp(q_video_ip).then(response => {
      });
    }, //前-向下
    DCQptzDown() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQptzDown(q_video_ip).then(response => {
      });
    }, //前-向左
    DCQptzLeft() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQptzLeft(q_video_ip).then(response => {
      });
    }, //前-向右
    DCQptzRight() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQptzRight(q_video_ip).then(response => {
      });
    },//前-云台停止
    DCQptzStop() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQptzStop(q_video_ip).then(response => {
      });
    }, //前-左上
    DCQLeftUp() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQLeftUp(q_video_ip).then(response => {
      });
    }, //前-左下
    DCQLeftDown() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQLeftDown(q_video_ip).then(response => {
      });
    },//前-右上
    DCQRightUp() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQRightUp(q_video_ip).then(response => {
      });
    }, //前-右下
    DCQRightDown() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQRightDown(q_video_ip).then(response => {
      });
    },//向上
    startQUp() {
      this.DCQptzUp()
    }, //右上
    startQRightUp() {
      this.DCQRightUp()
    },//右
    startQRight() {
      this.DCQptzRight()
    }, //右下
    startQRightDow() {
      this.DCQRightDown()
    },//下
    startQDow() {
      this.DCQptzDown()
    },//左下
    startQLeftDow() {
      this.DCQLeftDown()
    },//左
    startQLeft() {
      this.DCQptzLeft()
    },//左上
    startQLeftUp() {
      this.DCQLeftUp()
    },//所有方向停止
    stopQYt() {
      this.DCQptzStop()
    },
    // 前-手动录视频--开始
    DCQstartVideo() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQstartVideo(q_video_ip).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
        }
      });
    }, // 前-手动录视频--停止
    DCQendVideo() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQendVideo(q_video_ip).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
          this.DCQsmbVideo(q_video_ip);
        }
      });
    },
    //拍照
    DCQpicture() {
      const q_video_ip = localStorage.getItem("video_ip1");
      DCQpicture(q_video_ip).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
          this.DCQsmbPicture(q_video_ip);
        }
      });
    },// 前-同步视频文件
    DCQsmbVideo(q_video_ip) {
      // const q_video_ip= localStorage.getItem("video_ip1");
      DCQsmbVideo(q_video_ip).then(response => {
      });
    }, // 前-同步照片文件
    DCQsmbPicture(q_video_ip) {
      // const q_video_ip= localStorage.getItem("video_ip1");
      DCQsmbPicture(q_video_ip).then(response => {
      });
    },
    ///////吊舱后摄像头//////
    //后-电子放大
    DCHzoomFocus() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHzoomFocus(h_video_ip).then(response => {
      });
    }, //后-电子缩小
    DCHzoomLess() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHzoomLess(h_video_ip).then(response => {
      });
    }, //后-电子停止
    DCHzoomStop() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHzoomStop(h_video_ip).then(response => {
      });
    }, //电子缩小
    startDCHsx() {
      this.DCHzoomLess()
      console.log('缩小开始')
    },//电子放大
    startDCHfd() {
      this.DCHzoomFocus()
      console.log('放大开始')
    },
    stopDCHsxOrfd() {
      this.DCHzoomStop()
      console.log('缩小或放大停止')
    }, //后-向上
    DCHptzUp() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHptzUp(h_video_ip).then(response => {
      });
    }, //后-向下
    DCHptzDown() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHptzDown(h_video_ip).then(response => {
      });
    },//后-向左
    DCHptzLeft() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHptzLeft(h_video_ip).then(response => {
      });
    },//后-向右
    DCHptzRight() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHptzRight(h_video_ip).then(response => {
      });
    }, //后-云台停止
    DCHptzStop() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHptzStop(h_video_ip).then(response => {
      });
    },//后-左上
    DCHLeftUp() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHLeftUp(h_video_ip).then(response => {
      });
    }, //后-左下
    DCHLeftDown() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHLeftDown(h_video_ip).then(response => {
      });
    }, //后-右上
    DCHRightUp() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHRightUp(h_video_ip).then(response => {
      });
    }, //后-右下
    DCHRightDown() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHRightDown(h_video_ip).then(response => {
      });
    },
    //向上
    startHUp() {
      this.DCHptzUp()
    },//右上
    startHRightUp() {
      this.DCHRightUp()
    }, //右
    startHRight() {
      this.DCHptzRight()
    }, //右下
    startHRightDow() {
      this.DCHRightDown()
    },//下
    startHDow() {
      this.DCHptzDown()
    },//左下
    startHLeftDow() {
      this.DCHLeftDown()
    }, //左
    startHLeft() {
      this.DCHptzLeft()
    }, //左上
    startHLeftUp() {
      this.DCHLeftUp()
    },//所有方向停止
    stopHYt() {
      this.DCHptzStop()
    }, //后-手动录视频--开始
    DCHstartVideo() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHstartVideo(h_video_ip).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
        }
      });
    }, // 后-手动录视频--停止
    DCHendVideo() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHendVideo(h_video_ip).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
          this.DCHsmbVideo(h_video_ip);
        }
      });
    },//拍照
    DCHpicture() {
      const h_video_ip = localStorage.getItem("video_ip2");
      DCHpicture(h_video_ip).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
          this.DCHsmbPicture(h_video_ip);
        }
      });
    }, // 后-同步视频文件
    DCHsmbVideo(h_video_ip) {
      // const h_video_ip= localStorage.getItem("video_ip2");
      DCHsmbVideo(h_video_ip).then(response => {
      });
    }, // 后-同步照片文件
    DCHsmbPicture(h_video_ip) {
      // const h_video_ip= localStorage.getItem("video_ip2");
      DCHsmbPicture(h_video_ip).then(response => {
      });
    },


    ///////////////////海康摄像头/////////////////////
    //校时
    HKtiming() {
      HKtiming(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
        }
      });
    },
    //水印
    HKwatermark() {
      HKwatermark(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
        }
      });
    },
    //手动录像开始
    HKstartVideo() {
      HKstartVideo(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
        }
      });
    },
    //手动录像停止
    HKendVideo() {
      HKendVideo().then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
        }
      });
    },
    //拍照
    HKpicture() {
      HKpicture(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
        }
      });
    },
    //云台向上点击
    startUp: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzUp(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {

          }
        });
      }
    }, 1000),
    //云台向上----长按
    startUp1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzUp1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopUp1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzUpEnd1().then(response => {
        // if (typeof (response) != null) {
        //   // this.$modal.msg(response.msg);
        // }
      });
    },
    //云台向下点击
    startDown: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //云台向下----长按
    startDown1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzDown1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopDown1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzDownEnd1().then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台向左点击
    startLeft: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzLeft(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //云台向左----长按
    startLeft1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzLeft1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopLeft1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzLeftEnd1().then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台向右点击
    startRight: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzRight(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //云台向右----长按
    startRight1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzRight1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopRight1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzRightEnd1().then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台向左上点击
    startUpLeft: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzLeftUp(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //云台向左上----长按
    startUpLeft1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzLeftUp1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopUpLeft1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzLeftUpEnd1().then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台向右上点击
    startUpRight: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzRightUp(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //云台向右上----长按
    startUpRight1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzRightUp1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopUpRight1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzRightUpEnd1().then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台向左下点击
    startDownLeft: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzLeftDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //云台向左下----长按
    startDownLeft1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzLeftDown1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopDownLeft1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzLeftDownEnd1().then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台向右下点击
    startDownRight: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzRightDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //云台向右下----长按
    startDownRight1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzRightDown1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopDownRight1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzRightDownEnd1().then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台变倍+点击
    startBBplus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKzoomAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //云台变倍+  --  长按
    startBBplus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKzoomAdd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBBplus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKzoomAddEnd1().then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台变倍-点击
    startBBminus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKzoomDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //云台变倍-  --  长按
    startBBminus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKzoomDec1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBBminus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKzoomDecEnd1().then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台变焦+点击
    startBJplus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKfocusAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //云台变焦+  --  长按
    startBJplus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKfocusAdd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBJplus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKfocusAddEnd1().then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台变焦-点击
    startBJminus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKfocusDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //云台变焦-  --  长按
    startBJminus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKfocusDec1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBJminus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKfocusDecEnd1().then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台光圈+ 点击
    startGQplus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKirisAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //云台光圈+ --  长按
    startGQplus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKirisAdd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopGQplus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKirisAddEnd1().then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台光圈- 点击
    startGQminus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKirisDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else {
          }
        });
      }
    }, 1000),
    //云台光圈- --  长按
    startGQminus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKirisDec1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopGQminus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKirisDecEnd1().then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //电机转速
    echarts1(djzs) {
      setTimeout(() => {
        myChart = echarts.init(document.getElementById("gauges"));
        myChart.setOption(
          {
            series: [
              {
                radius: "100%",
                center: ['50%', '50%'],
                type: 'gauge',
                axisLine: {
                  lineStyle: {
                    width: 20,
                    color: [
                      [0.3, '#3e78f5'],
                      [0.7, '#9a54eb'],
                      [1, '#f37886']
                    ]
                  }
                },
                pointer: {
                  width: 6,
                  itemStyle: {
                    color: '#3e78f5'
                  }
                },
                axisTick: {
                  distance: -20,
                  length: 11,
                  lineStyle: {
                    color: '#fff',
                    width: 1
                  }
                },
                splitLine: {
                  distance: -20,
                  length: 20,
                  lineStyle: {
                    color: '#fff',
                    width: 2
                  }
                },
                axisLabel: {
                  color: '#fff',
                  distance: 9,
                  fontSize: 6
                },
                detail: {
                  // width:60,
                  // height:60,
                  fontSize: 10,
                  valueAnimation: true,
                  formatter: '{value} r/min',
                  color: '#fff'
                },
                data: [
                  {
                    value: djzs,
                    name: '电机转速',
                  }
                ],
                title: {
                  show: true,
                  fontSize: 10,
                  offsetCenter: ["0", "10%"],
                  color: '#fff'
                },
                max: 5000,
                min: 0
              }
            ]
          }
        );
        window.addEventListener("resize", () => {
          if (myChart != null) myChart.resize();
        })
      }, 1);
    }, //电机温度
    echarts2(djwd) {
      setTimeout(() => {
        myChart1 = echarts.init(document.getElementById("gauges2"));
        myChart1.setOption(
          {
            series: [
              {
                radius: "70%",
                center: ['50%', '50%'],
                type: 'gauge',
                max: 200,
                itemStyle: {
                  color: '#FFAB91'
                },
                progress: {
                  show: true,
                  width: 30
                },
                splitNumber: 8,
                axisLine: {
                  lineStyle: {
                    width: 14,
                    color: [
                      [1, '#ddebf6'],
                    ]
                  }
                },
                pointer: {
                  show: true,
                  width: 5,
                  itemStyle: {
                    color: '#FD7347'
                  }
                },
                axisTick: {
                  // show:false,
                  distance: -13,
                  length: 10,
                  lineStyle: {
                    color: '#a9a9a9',
                    width: 1
                  }
                },
                splitLine: {
                  distance: -10,
                  length: 14,
                  lineStyle: {
                    color: '#a9a9a9',
                    width: 2
                  }
                },
                axisLabel: {
                  color: '#a0e2f6',
                  distance: -29,
                  fontSize: 8
                },
                detail: {
                  // width:60,
                  // height:60,
                  fontSize: 10,
                  valueAnimation: true,
                  formatter: '{value}(°C)',
                  color: '#daa666'
                },
                data: [
                  {
                    value: djwd,
                    name: '电机温度',
                  }
                ],
                title: {
                  show: true,
                  offsetCenter: ["0", "-20%"],
                  color: '#daa666',
                  fontSize: 10
                },
                max: 200,
                min: 0
              }
            ]
          }
        );
        window.addEventListener("resize", () => {
          if (myChart1 != null) myChart1.resize();
        })
      }, 1);
    },//电池电量
    echarts3(dcdl) {
      setTimeout(() => {
        myChart2 = echarts.init(document.getElementById("gauges3"));
        myChart2.setOption(
          {
            series: [{
              name: "电量",
              type: "gauge",
              clockwise: true,
              data: [{
                value: dcdl,
                name: "电池电量",
              }],
              radius: "100%",
              // 仪表盘半径
              // startAngle: 208,
              // endAngle: -28,
              min: 0,
              max: 100,
              splitNumber: 10,
              center: ["50%",
                "50%"],
              axisLabel: {
                // 大刻度标签。
                show: true,
                distance: 10,
                color: "white",
                fontSize: 8,
                formatter: "{value}",
              },
              splitLine: {
                length: 10,
                // 分隔线长度
                lineStyle: {
                  width: 2,
                  color: '#ffffff'
                }
              },
              axisLine: {
                // 仪表盘轴线(轮廓线)相关配置。
                show: true,
                lineStyle: {
                  // 仪表盘轴线样式。
                  opacity: 1,
                  width: 14,
                  // 表盘宽度
                  shadowBlur: 10,
                  color: [// 仪表盘轴线颜色
                    [1,
                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#00e4f0"
                      },
                      {
                        offset: 0.3,
                        color: "#00e4f0"
                      },
                      {
                        offset: 1,
                        color: "#00e4f0"
                      }])
                    ]
                  ]
                },
              },
              axisTick: {
                // 小刻度相关
                splitNumber: 5,
                // 小刻度个数
                show: true
              },
              detail: {
                // 仪表盘详情数据相关
                color: "#5ab1ef",
                fontSize: 10,
                formatter: "{value}%",
                offsetCenter: [0,
                  '20']
              },
              title: {
                show: true,
                offsetCenter: ["0", "-18%"],
                color: '#b6cbea',
                fontSize: 10
              },
              itemStyle: {
                // 指针样式
                color: "#fff"
              },
              pointer: {
                // 仪表盘指针。
                show: true,
                length: "70%",
                width: 6,
              },
            },
            ],
          }
        );
        window.addEventListener("resize", () => {
          if (myChart2 != null) myChart2.resize();
        })
      }, 1);
    }
  },
  beforeDestroy() {
    if (this.rtspQurl != null || this.rtspQurl != "") { this.rtspQurl = ""; }
    if (this.rtspHurl != null || this.rtspHurl != "") { this.rtspHurl = ""; }
    this.stopQFlvVideo() //停止供流
    this.stopHFlvVideo() //停止供流
    if (myChart != null) { myChart.clear(); myChart = null; }
    if (myChart1 != null) { myChart1.clear(); myChart1 = null; }
    if (myChart2 != null) { myChart2.clear(); myChart2 = null; }
    //清除定时器
    if (this.timer) {
      clearInterval(this.timer); //关闭
    }
  },
  enter() {
    this.isDologin = true;
  },
  leave() {
    this.isDologin = false;
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: calc(100vh - 35px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #081a46;
  //padding-left:0;
}

* {
  margin: 0;
  //padding: 0;
}

.el-button+.el-button {
  margin-left: 0px;
}

//左边
.left {
  width: 19%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .put {
    width: 98%;
    margin: 10px;

    ::v-deep .el-input {
      width: 100%;
      height: 20px;
    }

    ::v-deep .el-input__inner {
      border: 2px solid #0264bf;
      background-color: #081a46;
      // margin: 10px;
    }
  }

  .table {
    width: 98%;
    height: 200px;
    margin: 10px;
    // margin-top: 20px;
    overflow: auto;

    ::v-deep .el-table__body-wrapper {
      &::-webkit-scrollbar {
        // 整个滚动条
        width: 0px; // 纵向滚动条的宽度
        background: rgba(71, 103, 182, 0.3);
        border: none;
      }

      &::-webkit-scrollbar-track {
        // 滚动条轨道
        border: none;
      }
    }

    .el-table {
      width: 100%;
    }

    ::v-deep .el-table th.gutter {
      display: none;
      width: 0
    }

    ::v-deep .el-table colgroup col[name='gutter'] {
      display: none;
      width: 0;
    }

    // ::deep .el-table::before {
    //     height: 0px;
    // }

    ::v-deep .el-table__body {
      width: 100%;
      // padding-left: 10px;
    }

    ::v-deep .el-table__body-wrapper {
      width: 100%;
      background-color: #081a46;

    }

    /*滚动条的宽度*/
    .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      display: none;
      width: 0;
    }

    .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      display: block;
      width: 0;
    }

    // ::v-deep .el-table .cell{
    //     padding: 0;
    // }
    //::v-deep .el-table,
    // ::v-deep .el-table__expanded-cell {
    //     background-color: transparent;
    // }
    ::v-deep .el-table tr {
      background-color: #081a46;
      border: none;
      // height: 50px;
      width: 100%;
    }

    ::v-deep .el-table td {
      background-color: #081a46;
      border: none;
      width: 100%;
      // height: 50px;
    }

    // /* 表格内背景颜色 */
    ::v-deep .el-table th {
      //background-color:#081a46;
      border: none;
      width: 100%;
    }

    // 移入变色
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: #222448;
    }
  }

  ::v-deep.el-progress-bar__inner {
    background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
    // background-image: linear-gradient(90deg,#252799 100%,#2887b3 50% #27c9de 0%);  // 给进度条加上渐变色
    // background: linear-gradient(to right, #252799, #2887b3, #27c9de 70px);
    // background: linear-gradient(to right, red, blue 70px);
    // stroke-linecap:butt
  }

  .table::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
  }

  .table-bottom {
    width: 98%;
    height: 170px;
    margin: 10px;
    // margin-top: 20px;
    overflow: auto;

    ::v-deep .el-table__body-wrapper {
      &::-webkit-scrollbar {
        // 整个滚动条
        width: 0px; // 纵向滚动条的宽度
        background: rgba(71, 103, 182, 0.3);
        border: none;
      }

      &::-webkit-scrollbar-track {
        // 滚动条轨道
        border: none;
      }
    }

    .el-table {
      width: 100%;

    }

    ::v-deep .el-table th.gutter {
      display: none;
      width: 0
    }

    ::v-deep .el-table colgroup col[name='gutter'] {
      display: none;
      width: 0;
    }

    // ::deep .el-table::before {
    //     height: 0px;
    // }

    ::v-deep .el-table__body {
      width: 100%;
      // padding-left: 10px;
      background-color: #081a46;

    }

    ::v-deep .el-table__body-wrapper {
      width: 100%;
      background-color: #081a46;
    }

    /*滚动条的宽度*/
    .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      display: none;
      width: 0;
    }

    .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      display: block;
      width: 0;
    }

    // ::v-deep .el-table .cell{
    //     padding: 0;
    // }
    //::v-deep .el-table,
    // ::v-deep .el-table__expanded-cell {
    //     background-color: transparent;
    // }
    ::v-deep .el-table tr {
      // background-color: transparent;
      background-color: #081a46;
      border: none;
      // height: 50px;
      width: 100%;
    }

    ::v-deep .el-table td {
      background-color: #081a46;
      //background-color: trannt;
      border: none;
      width: 100%;
      // height: 50px;
    }

    // /* 表格内背景颜色 */
    ::v-deep .el-table th {
      background-color: transparent;
      border: none;
      width: 100%;
    }

    // 移入变色
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: #222448;
    }
  }
}

//中间
.video-center {
  width: 36%;
  height: 100%;
  margin-left: 1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #081a46;

  .center-header {
    width: 98%;
    height: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #2A2E4A;
    border-top: none;
    border-radius: 0px 0px 4px 4px;
    margin-bottom: 8px;

    p {
      width: 148px;
      height: 35px;
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #E9E9E9;
    }
  }

  .center-box1 {
    width: 98%;
    height: 60%;
    background: #081a46;
    border: 1px solid #262e63;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .Speed-dial {
      width: 100%;
      height: 45%;
      display: flex;
      justify-content: space-between;
      //background-color: #00FF00;
    }

    .right-mode1 {
      width: 80%;
      height: 15%;
      //margin-bottom: 1%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      // background-color: #0264bf;

      .mode-box {
        width: 60px;
        height: 40px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        :nth-child(1) {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-bottom: 1%;
        }

        :nth-child(2) {
          width: 60px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #75bfff;
        }

      }
    }

    .right-mode2 {
      width: 80%;
      height: 15%;
      //margin-bottom: 1%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      //background-color: #3eecf5;

      .mode-box {
        width: 60px;
        height: 40px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        :nth-child(1) {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
          margin-bottom: 1%;
        }

        :nth-child(2) {
          width: 60px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 2px solid #54619D;
          border-radius: 10px;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #75bfff;
        }

      }
    }

    .Mode-selection {
      width: 98%;
      height: 6%;
      display: flex;
      justify-content: center;
      align-items: center;
      //background-color: #75bfff;
      //margin-bottom: 4px;
      //margin-left: 7px;

      p {
        width: 96px;
        height: 24px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }
    }

    .Operation-button {
      width: 80%;
      height: 20%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-left: 7px;
      margin-bottom: 2%;

      .Operation-buttonBox {
        width: 60px;
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        :nth-child(1) {
          width: 25px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(68deg, #3040F4, #3F79F4);
          margin-bottom: 5px;
          border-width: 0px
        }

        :nth-child(2) {
          width: 60px;
          height: 16px;
          text-align: center;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }
      }
    }
  }

  //手动模式
  .center-box2-1 {
    width: 98%;
    height: 40%;
    background: #081a46;
    border: 1px solid #262E63;
    border-top: none;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .right-bottomTitle {
      width: 98%;
      height: 10%;
      margin-top: 2px;
      //background-color: #ebb42a;
      //margin-bottom: 2px;

      >p {
        width: 95px;
        height: 20px;
        font-size: 15px;
        margin-left: 2%;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }

      span {
        display: block;
        width: 52px;
        height: 2px;
        margin-left: 2.5%;
        background: #4691FF;
      }
    }

    .right-bottomBox {
      width: 98%;
      height: 85%;
      //background-color: #00FF00;

      .right-bottomBox1 {
        width: 100%;
        height: 50%;
        /// background-color: #54619D;

        .right-bottomBox1-1 {
          width: 100%;
          height: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          //background-color: #2ec7a1;
          >p {
            width: 80px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0F1A43;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }

          span {
            display: block;
            margin-top: 1%;
            width: 8px;
            height: 8px;
            margin-left: 0.5%;
            margin-bottom: 10px;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }

          .btn {
            width: 80px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            margin-left: 30px;
          }
        }

        .right-bottomBox1-2 {
          width: 100%;
          height: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            display: block;
            // margin-top: 1%;
            width: 8px;
            height: 8px;
            // margin-left: 0.5%;
            //margin-bottom: 10px;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }

          .btn {
            width: 80px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            margin-left: 30px;
          }
        }
      }

      .right-bottomBox1-3 {
        width: 100%;
        height: 25%;
        display: flex;
        align-items: center;
        justify-content: center;

        //background-color: #75bfff;
        .right-bottomBox1-3-1 {
          width: 60%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          //background-color: #f391f3;
          .btn1 {
            width: 50px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #0D817A);
            border: 2px solid #2ec7a1;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            margin-right: 48px;
          }

          .btn2 {
            width: 50px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #337F17);
            border: 2px solid #3CA813;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }
        }

      }

      .right-bottomBox1-4 {
        width: 100%;
        height: 25%;
        display: flex;
        align-items: center;
        justify-content: center;

        //background-color: #df971a;
        .right-bottomBox1-4-1 {
          width: 45%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;

          //background-color: #21df1a;
          .btn1 {
            width: 50px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }

          .btn2 {
            width: 50px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #065D70);
            border: 2px solid #108B8F;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
            //margin-left: 10px;
          }

          .btn3 {
            width: 50px;
            height: 25px;
            //margin-left: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #4C0820, #0D1538);
            border: 2px solid #942028;
            font-size: 12px;
            font-family: Bahnschrift;
            font-weight: 400;
            color: #C1C1C1;
          }
        }
      }
    }

  }

  //自动模式
  .center-box2-2 {
    width: 98%;
    height: 40%;
    background: #081a46;
    border: 1px solid #2A2E4A;
    border-top: none;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .right-bottomTitle {
      width: 98%;
      height: 20%;
      margin-top: 1%;

      //background-color: #00FF00;
      >p {
        width: 95px;
        height: 26px;
        font-size: 15px;
        margin-left: 2%;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }

      span {
        display: block;
        width: 52px;
        height: 2px;
        margin-left: 2.5%;
        background: #4691FF;
      }
    }

    .right-bottomBox1 {
      width: 50%;
      height: 30%;
      margin-left: 2%;
      // background-color: #108B8F;
      display: flex;
      align-items: flex-end;
      justify-content: center;

      >span {
        display: block;
        //margin-top: 5px;
        margin-left: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }

      .btn {
        width: 80px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        font-size: 12px;
        margin-left: 8px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }
    }

    .right-bottomBox2 {
      width: 50%;
      height: 40%;
      //background-color: #2B5B9B;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;

      .btn1 {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        font-size: 12px;
        //margin-left: 8px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }

      .btn2 {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #065D70);
        border: 2px solid #108B8F;
        border-radius: 4px;
        font-size: 12px;
        //margin-left: 8px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }

      .btn3 {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0D1538, #337F17);
        border: 2px solid #3CA813;
        border-radius: 4px;
        font-size: 12px;
        //margin-left: 8px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }
    }
  }

  //一键返航
  .center-box2-3 {
    width: 98%;
    height: 40%;
    background: #081a46;
    border: 1px solid #2A2E4A;
    border-top: none;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .right-bottomTitle {
      width: 98%;
      height: 15%;
      margin-top: 1%;

      //background-color: #00FF00;
      >p {
        width: 95px;
        height: 20px;
        font-size: 15px;
        margin-left: 2%;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }

      span {
        display: block;
        width: 52px;
        height: 2px;
        margin-left: 2.5%;
        background: #4691FF;
      }
    }

    .right-bottomBox {
      width: 98%;
      height: 85%;

      //background-color: #108B8F;
      .right-bottomBox1 {
        width: 100%;
        height: 40%;
        display: flex;
        justify-content: center;
        align-items: center;

        //background-color: #1b60e1;
        .btn1 {
          width: 50px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #0D817A);
          border: 2px solid #2ec7a1;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }

        .btn2 {
          width: 50px;
          height: 20px;
          margin-left: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #337F17);
          border: 2px solid #3CA813;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }

      .right-bottomBox2 {
        width: 100%;
        height: 40%;
        display: flex;
        justify-content: center;
        align-items: center;

        //background-color: #75bfff;
        .btn {
          width: 50px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          //margin-left: 8px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }
    }

  }

  //自由模式
  .center-box2-4 {
    width: 98%;
    height: 40%;
    background: #081a46;
    border: 1px solid #2A2E4A;
    border-top: none;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .right-bottomTitle {
      width: 98%;
      height: 15%;

      // background-color: #00FF00;
      >p {
        width: 95px;
        height: 20px;
        font-size: 15px;
        margin-left: 2%;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }

      span {
        display: block;
        width: 52px;
        height: 2px;
        margin-left: 2.5%;
        background: #4691FF;
      }
    }

    .right-bottomBox {
      width: 98%;
      height: 85%;

      //background-color: #2ec7a1;
      .right-bottomBox1 {
        width: 100%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;

        //background-color: hotpink;
        >span {
          display: block;
          //margin-top: 5px;
          margin-left: 4px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #EDEDED;
        }

        .btn {
          width: 80px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 8px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }

      .right-bottomBox2 {
        width: 100%;
        height: 28%;
        display: flex;
        justify-content: center;
        align-items: center;

        //background-color: #bfd612;
        .btn1 {
          width: 50px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #0D817A);
          border: 2px solid #2ec7a1;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }

        .btn2 {
          width: 50px;
          height: 20px;
          margin-left: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #337F17);
          border: 2px solid #3CA813;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }

      .right-bottomBox3 {
        width: 100%;
        height: 28%;
        display: flex;
        align-items: center;
        justify-content: center;

        //background-color: #fd90f8;
        .btn1 {
          width: 50px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #1B2D67);
          border: 2px solid #2B5B9B;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }

        .btn2 {
          width: 50px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #0D1538, #065D70);
          border: 2px solid #108B8F;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
          margin-left: 30px;
          margin-right: 30px;
        }

        .btn3 {
          width: 50px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, #4C0820, #0D1538);
          border: 2px solid #942028;
          font-size: 12px;
          font-family: Bahnschrift;
          font-weight: 400;
          color: #C1C1C1;
        }
      }
    }
  }
}


//右边
.video-right {
  width: 48%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .right-header {
    width: 98%;
    height: 65px;
    margin-bottom: 8px;
    border: 1px solid #2A2E4A;
    border-top: none;
    border-radius: 0px 0px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #081a46;

    p {
      width: 148px;
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #E9E9E9;
    }
  }

  .videoBox {
    width: 98%;
    height: calc(100vh - 98px);
    display: flex;
    flex-direction: column;
    //justify-content: center;
    align-items: center;
    border: 1px solid #262E63;
    border-radius: 4px;
    background: #081a46;

    .videobox1 {
      width: 99.9%;
      height: 50%;
      display: flex;
      margin-bottom: 4px;

      .box {
        width: 50%;
        height: 100% !important;
        /*新增高度 2023-5-6*/
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000000;
        border: 1px solid #2A2E4A;
        background-image: url(../../components/images/jiankong.png);
        background-repeat: no-repeat;
        background-position: center center;

        ::v-deep .xgplayer {
          background: none;
        }
      
        ::v-deep .xgplayer .xgplayer-controls {
          display: none;
          ;
        }

      }

      .video-js {
        background-color: rgb(1 5 43);
        object-fit: fill;
        //隐藏video播放按钮
      }

      video {
        pointer-events: none;
      }

      //隐藏video播放按钮
      video::-webkit-media-controls-play-button {
        display: none !important;
      }

      //隐藏video音量进度条
      video::-webkit-media-controls-volume-slider {
        display: none !important;
      }

      //隐藏video音量按钮
      video::-webkit-media-controls-mute-button {
        display: none !important;
      }

      video::-webkit-media-controls-toggle-closed-captions-button {
        display: none !important;
      }

      //隐藏当前时间
      video::-webkit-media-controls-current-time-display {
        display: none !important;
      }

      //隐藏剩余时间
      video::-webkit-media-controls-time-remaining-display {
        display: none !important;
      }

      //隐藏进度条
      video::-webkit-media-controls-timeline {
        display: none !important;
      }

      //更多选项
      video::-internal-media-controls-overflow-button {
        display: none !important;
      }

      .active {
        border: 1px solid #00FF00;
      }
    }

    .videobox2 {
      width: 99%;
      height: 15%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 3%;

      .videobox2-1 {
        width: 98%;
        height: 20%;
        margin-bottom: 2%;

        p {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #EDEDED;
          margin-left: 2%;
        }

        span {
          display: block;
          margin-left: 2.5%;
          width: 36px;
          height: 2px;
          background: #4691FF;
        }
      }

      .videobox2-2 {
        width: 98%;
        height: 80%;
        display: flex;
        justify-content: center;

        .videobox2-2-1 {
          width: 20%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          >P {
            width: 90px;
            height: 25px;
            margin-top: 5%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #0F1A43;
            border: 2px solid #54619D;
            border-radius: 10px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #C1C1C1;
          }
        }

        .videobox2-2-3 {
          width: 20%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .btn1 {
            width: 70px;
            height: 25px;
            margin-top: 5%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            margin-bottom: 5%;
          }

          .btn2 {
            width: 70px;
            height: 25px;
            // margin-top: 27%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
          }
        }

        .videobox2-2-4 {
          width: 20%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .btn {
            width: 70px;
            height: 25px;
            margin-top: 5%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
            background: linear-gradient(0deg, #0D1538, #1B2D67);
            border: 2px solid #2B5B9B;
            border-radius: 4px;
          }

          btn:nth-child(2) {
            margin-left: -0.5%;
          }
        }

        .videobox2-2-5 {
          width: 20%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .btn {
            width: 90px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(0deg, #0D1538, #673B1B);
            border: 2px solid #9B6D2B;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #EDEDED;
          }

          :nth-child(2) {
            margin-top: 5%;
          }
        }

      }
    }

    .videobox3 {
      width: 98%;
      height: 28%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 2%;
      //background-color: #00FF00;

      .videobox3-1 {
        width: 98%;
        height: 10%;

        p {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #EDEDED;
          margin-left: 2%;
        }

        span {
          display: block;
          margin-left: 3%;
          width: 20px;
          height: 2px;
          background: #4691FF;
        }
      }

      .videobox3-2 {
        width: 98%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        //margin-top: 1%;
        //background-color: #0051ff;

        .ptz {
          position: relative;
          width: 264px;
          /* padding: 10px; */
          height: 180px;
          //background-color: aquamarine;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .circle-left {
          width: 73px;
          height: 146px;
          /* border: 1px solid #fff; */
          border-radius: 0px 73px 73px 0px;
          position: absolute;
          right: 0;
          transform-origin: 0 50%;
        }

        .circle-right {
          width: 73px;
          height: 146px;
          /* border: 1px solid #fff; */
          border-radius: 73px 0px 0px 73px;
          position: absolute;
          right: 0;
          transform-origin: 100% 50%;
        }

        /* 八等份分割线 */
        #Canvas {
          position: absolute;
          z-index: 1;
          pointer-events: none;
          left: 87px;
          top: 27px;
          transform: rotate(-22.5deg);
        }

        /* 外圆环 */
        #round {
          width: 160px;
          height: 160px;
          background-color: #081a46;
          border-radius: 50%;
          position: absolute;
          left: 80px;
          top: 10px;
          z-index: 0;
        }

        /* 黑色内圆环 */
        #center_black {
          width: 74px;
          height: 74px;
          background-color: #081a46;
          border-radius: 50%;
          position: absolute;
          left: 123px;
          top: 53px;
          z-index: 1;
        }

        /* 中心蓝色圆环 */
        #center_blue {
          width: 60px;
          height: 60px;
          text-align: center;
          background: linear-gradient(68deg, #3040F4, #3F79F4);
          border-radius: 50%;
          position: absolute;
          left: 130px;
          top: 60px;
          z-index: 2;
        }

        #center_blue span {
          position: absolute;
          left: 17px;
          top: 22px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ededed;
        }

        /* 圆八等份 */
        #circle0 {
          width: 146px;
          height: 146px;
          border-radius: 73px;
          top: 0px;
          background-color: #0f2140;
          position: absolute;
          left: 87px;
          top: 17px;
          z-index: 0;
          pointer-events: auto;
          transform: rotate(-22.5deg);
        }

        #left {
          /* 用矩形切割半圆 */
          clip: rect(0px 73px 146px 0px);
          position: absolute;
          right: 0px;
          width: 73px;
          height: 146px;
          overflow: hidden;
          border-left: 2px solid #011137;
        }

        #right {
          clip: rect(0px 78px 146px 0px);
          position: absolute;
          left: 0px;
          width: 73px;
          height: 146px;
          overflow: hidden;
          //border-right: 2px solid #011137;
        }

        #circle2:hover,
        #circle3:hover,
        #circle4:hover,
        #circle5:hover,
        #circle6:hover,
        #circle7:hover,
        #circle8:hover,
        #circle9:hover,
        #center_blue:hover {
          cursor: pointer;
        }

        #circle2 {
          background-color: #0a2056;
          //border-left: 2px solid #011137;
        }

        #circle2 span {
          position: absolute;
          left: 14px;
          top: 15px;
          transform: rotate(22.5deg);
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ededed;
        }

        #circle3 {
          background-color: #0a2056;
          transform: rotate(45deg);
          border-left: 2px solid #011137;
        }

        #circle3 span {
          position: absolute;
          left: 10px;
          top: 15px;
          transform: rotate(22.5deg);
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ededed;
        }

        #circle4 {
          background-color: #0a2056;
          transform: rotate(90deg);
          border-left: 2px solid #011137;
        }

        #circle4 span {
          position: absolute;
          left: 15px;
          top: 15px;
          transform: rotate(22.5deg);
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ededed;
        }

        #circle5 {
          background-color: #0a2056;
          transform: rotate(135deg);
          border-left: 2px solid #011137;
        }

        #circle5 span {
          position: absolute;
          left: 12px;
          top: 15px;
          transform: rotate(22.5deg);
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ededed;
        }

        #circle6 {
          background-color: #0a2056;
          transform: rotate(225deg);
          border-right: 2px solid #011137;
        }

        #circle6 span {
          position: absolute;
          right: 14px;
          top: 15px;
          transform: rotate(-22.5deg);
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ededed;
        }

        #circle7 {
          background-color: #0a2056;
          transform: rotate(270deg);
          border-right: 2px solid #011137;
        }

        #circle7 span {
          position: absolute;
          right: 10px;
          top: 15px;
          transform: rotate(-22.5deg);
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ededed;
        }

        #circle8 {
          background-color: #0a2056;
          transform: rotate(315deg);
          border-right: 2px solid #011137;
        }

        #circle8 span {
          position: absolute;
          right: 15px;
          top: 15px;
          transform: rotate(-22.5deg);
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ededed;
        }

        #circle9 {
          background-color: #0a2056;
          transform: rotate(360deg);
        }

        #circle9 span {
          position: absolute;
          right: 10px;
          top: 15px;
          transform: rotate(-22.5deg);
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ededed;
        }

        .videobox3-3 {
          width: 30%;
          height: 80%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 1%;
          // margin-left: -20%;
          justify-content: space-around;

          // background-color: #00FF00;
          .videobox3-3-1 {
            width: 90%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .btn1 {
              width: 32px;
              height: 32px;
              background: linear-gradient(68deg, #3040F4, #3F79F4);
              border-radius: 50%;
              border: none;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              cursor: pointer;
              margin-bottom: 4px;
            }

            p {
              width: 26px;
              height: 18px;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              margin-bottom: 4px;
            }

            .btn2 {
              width: 32px;
              display: flex;
              justify-content: center;
              align-items: center;
              height: 32px;
              background: linear-gradient(68deg, #3040F4, #3F79F4);
              border-radius: 50%;
              border: none;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              cursor: pointer;
              margin-bottom: 4px;
            }
          }
        }
      }
    }
  }
}
</style>
